Emil’s Chronicle - The journal of Emil A Eklund

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…

3 Responses to 'Canvas in IE Feedback'

  1. Erik Arvidsson Says:

    If it works then use it.

    And today Canvas + IeVmlCanvas works for a lot of things

  2. Ivan Says:

    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?

  3. EI Says:

    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

Leave a Reply

(required)
(required, will not be published)