Canvas in IE Feedback
Seems quite a few sites picked up on my Canvas in IE project, a lot of nice and encouraging things has been said about it. Thanks.
However Alex Russell raised a very good point:
“I’m really not sure that <canvas> is something we should be emulating…SVG Tiny + DOM bindings OTOH…”
And the more I think about it the more I agree. SVG and vector graphics is far superior to 2D drawing. Everyone seems to be moving away from pixel drawing to vectors these days, even Windows. While the web, with canvas, seems to move in the opposite direction, from SVG and VML to Canvas.
From a technical point of view it also makes a lot more sense to emulate SVG Tiny using VML as both are vector based and therefore a cleaner mapping should be possible…
January 11th, 2006 at 06:42
If it works then use it.
And today Canvas + IeVmlCanvas works for a lot of things
July 21st, 2006 at 09:31
I like your chart, it’s simple to use and it looks really nice.
There is only one step to perfection: How to print it from IE? It is not visible in print preview, and it won’t print. In Firefox I see chart in print preview, but still nothing on paper. Can anyone help me how to print canvas from browser?
March 18th, 2007 at 17:06
translate don’t work on this
Canvas demo
window.onload = function() { ieCanvasInit(”iecanvas.htc”); }
function drawBowtie(ctx, fillStyle) {
ctx.globalAlpha = 0.3;
ctx.fillStyle = “rgb(200,200,200)”;
ctx.fillRect(-30, -30, 60, 60);
ctx.fillStyle = fillStyle;
ctx.globalAlpha = 1.0;
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(-25, -25);
ctx.lineTo(25, -25);
ctx.lineTo(-25, 25);
ctx.closePath();
ctx.fill();
}
function dot(ctx) {
ctx.save();
ctx.fillStyle = “black”;
ctx.fillRect(-2, -2, 4, 4);
ctx.restore();
}
function draw () {
var canvas = document.getElementById(”canvas”);
var ctx = canvas.getContext(”2d”);
// note that all other translates are relative to this
// one
ctx.translate(45, 45);
ctx.save();
//ctx.translate(0, 0); // unnecessary
drawBowtie(ctx, “red”);
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(85, 0);
ctx.rotate(45 * Math.PI / 180);
drawBowtie(ctx, “green”);
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(0, 85);
ctx.rotate(135 * Math.PI / 180);
drawBowtie(ctx, “blue”);
dot(ctx);
ctx.restore();
ctx.save();
ctx.translate(85, 85);
ctx.rotate(90 * Math.PI / 180);
drawBowtie(ctx, “yellow”);
dot(ctx);
ctx.restore();
}
draw