Using createElement on canvas as a temporary placement to draw shapes and encounter an error. Does the canvas have to be visible before convert to image or what is the solution to create canvas and flatten into an image?

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd=convertCanvasToImage(ctx1)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa[0].toDataURL("image/png");
    return image;
}

Using createElement on canvas as a temporary placement to draw shapes and encounter an error. Does the canvas have to be visible before convert to image or what is the solution to create canvas and flatten into an image?

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd=convertCanvasToImage(ctx1)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa[0].toDataURL("image/png");
    return image;
}

• javascript
• canvas

1 Answer 1

Your code reads like this

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = convertCanvasToImage(ctx1)


function convertCanvasToImage(aaa) {

    something = aaa[0].toDataURL("image/png");

}

see how you pass the context to the function, so really you're doing

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = ctx1[0].toDataURL("image/png");

However, the context is not an array, and toDataURL is a method on the canvas element, not the context, so you should be doing

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd = convertCanvasToImage(ctx)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa.toDataURL("image/png");
    return image;
}

Where you pass the canvas into the function, and access it's toDataURL method directly.
The argument isn't really neccessary either, as the default type is actually "image/png", and you only have to pass in an argument if you something other than png.

FIDDLE