Question

I have an object for my canvas which is stored as an object, i stored the canvas to the object like so:

window.canvas = new Object();
temp = document.getElementById('canvas_id');
canvas[objname] = new Object();
canvas[objname].ctx =  temp.getContext("2d");       

The problem I am having how ever is i cannot use ctx for draw image….

I do this in my draw function:

Just so you know the image is set like:

img = new Image();
img.src = 'images/0.png';

Later in the script the draw:

canvas['canvas1'].ctx.drawImage(img.src,abposx,abposy);

Problem is i get a type error which says this:

Uncaught TypeError: Type error

Any ideas if it is because I have placed ctx in the object and so cannot call ctx like that??

Answer 1

Try passing the image itself instead of image.src try the below:

canvas['canvas1'].ctx.drawImage(img,abposx,abposy);

I hope that helps!

this is a code sample :

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'images/backdrop.png';
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  }
}

from https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html