Canvas HTML5 JavaScript code not working, with canvas.toDataURL()

Question

I've failed to get this code working:

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 10; // or whatever
            var fillColor = '#ff0000';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 200, 200, '#ddd');

})();

function hi(){
var canvas = document.getElementsByTagName('canvas');
var imageData = canvas.toDataURL();
    document.getElementById("his").innerHTML=imageData;
}

It's a little JavaScript code, which creates a little canvas in the div with the id of canvas.

And, I'm trying to make the image save, and write to a div with the id of his the saved image. NOW that's where the code stops working... I'd greatly appreciate your help, thanks! :)

@bergi I thought that it's URL would be accessible in plain text. — seanlevan
– seanlevan, Commented Feb 26, 2013 at 19:06
Yeah, it is, altough you better should use .textContent for that. — Bergi
– Bergi, Commented Feb 26, 2013 at 19:07

Bergi · Accepted Answer · 2013-02-26 19:10:09Z

2

document.getElementsByTagName('canvas') returns a NodeList, not a single element. So use

function hi(){
    var canvas = document.getElementsByTagName('canvas')[0];
    imageData = canvas ? canvas.toDataURL() : "could not find a <canvas> element";
    document.getElementById("his").textContent = imageData;
}

answered Feb 26, 2013 at 19:10

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

seanlevan Over a year ago

When I do exactly what you had in your example, I get this: jsfiddle.net/kneDX/974

Bergi Over a year ago

Simple example doesn't work on JSFiddle: jsfiddle.net/kneDX/976 Don't forget to check your error console!

seanlevan Over a year ago

So.. what was the problem? @bergi

Bergi Over a year ago

See the answers of the linked question!

Matt Ball · Accepted Answer · 2013-02-26 19:02:44Z

1

Image data URLs belong in image src attributes. Images don't have innerHTML.

answered Feb 26, 2013 at 19:02

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

1 Comment

seanlevan Over a year ago

I thought that it's URL would be accessible in plain text.

Collectives™ on Stack Overflow

Canvas HTML5 JavaScript code not working, with canvas.toDataURL()

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related