how to draw on a image background using canvas?

Question

What is wrong with my code.I am trying to load the image background on a canvas and then draw few rectangles on the image canvas.my image is not showing up on the canvas or either is it being completely overwritten my rectangles.
I have followed this SO question, but still, it happens.

//Initialize a new Box, add it, and invalidate the canvas
function addRect(x, y, w, h, fill) {
  var rect = new Box;
  rect.x = x;
  rect.y = y;
  rect.w = w
  rect.h = h;
  rect.fill = fill;
  boxes.push(rect);
  invalidate();
}

// holds all our rectangles
var boxes = []; 

// initialize our canvas, add a ghost canvas, set draw loop
// then add everything we want to intially exist on the canvas
function drawbackground(canvas,ctx,onload){
  var img = new Image();
  img.onload = function(){
    // canvas.width = img.width;
    // canvas.height = img.height;
    ctx.drawImage(img);
    //addRect(200, 200, 200, 200, '#FFC02B');
    onload(canvas,ctx);
  };
  img.src = "https://cdnimages.opentip.com/full/VLL/VLL-LET-G.jpg";
}

function init() {
  // canvas = fill_canvas();
  canvas = document.getElementById('canvas');
  HEIGHT = canvas.height;
  WIDTH = canvas.width;
  ctx = canvas.getContext('2d');
  ghostcanvas = document.createElement('canvas');
  ghostcanvas.height = HEIGHT;
  ghostcanvas.width = WIDTH;
  gctx = ghostcanvas.getContext('2d');


  // make draw() fire every INTERVAL milliseconds
  setInterval(draw, INTERVAL);

  // set our events. Up and down are for dragging,
  // double click is for making new boxes
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
  canvas.ondblclick = myDblClick;

  // add custom initialization here:
  drawbackground(canvas,ctx);
  //context.globalCompositeOperation = 'destination-atop';
  // add an orange rectangle
  addRect(200, 200, 200, 200, '#FFC02B');

  // add a smaller blue rectangle
  addRect(25, 90, 250, 150  , '#2BB8FF');
}

//wipes the canvas context
function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}
...

score 0 · Answer 1 · answered Jan 11 '18 at 12:08

0

As the Image loads always asynchronously, and you draw your rects synchronously after drawbackground() call, you will get a canvas with only image on it.

You need to create function which will pe passed as third argument to drawbackground, and call addRect in this function instead of drawbackground

PS: Your code should throw an exception because

onload(canvas,ctx);

will try to call undefined as a function

answered Jan 11 '18 at 12:08

Michael Stets

98
1
8

it's not throwing any exception!!.Instead of creating a function to call my addRect can i directly pass the addrect as a third argument to my drawbackground? – roadrunner009 Jan 11 '18 at 12:17
nope, since drawbackground call it's third argument with two arguments: `onload(canvas,ctx);` you should use another function (anonymus as option): `drawbackground(canvas,ctx, function() { addRect(200, 200, 200, 200, '#FFC02B'); addRect(25, 90, 250, 150 , '#2BB8FF'); });` – Michael Stets Jan 11 '18 at 12:21
do i need to take care of the passed parameters(canvas,ctx) in my new function or will it draw without receiving them, as you have shown above. – roadrunner009 Jan 11 '18 at 12:34
depends on your needs, I think ) You can ignore these arguments, it's okay. – Michael Stets Jan 11 '18 at 12:34
https://jsfiddle.net/cpeq3kht/ this is my code.Iam not able to make it work.where am i doing wrong? – roadrunner009 Jan 11 '18 at 12:41
https://jsfiddle.net/edcp9vLo/ here is a bit fixed variant, try to look at the differences. The main draw cycle is not correct. There is no sense in your first call with drawings because every INTERVAL you call clear() and draw everything from scratch – Michael Stets Jan 11 '18 at 12:54
I am trying to reposition the rect's, so, i am clearing the canvas and drawing again with the moved rects in their new position.in the code you gave, still, it won't load the image as my background. – roadrunner009 Jan 11 '18 at 16:10
your image is loaded and drawn perfectly, but after a while it was erased by clear() if you need to redraw the whole canvas each time, you need to draw image each time too – Michael Stets Jan 12 '18 at 05:47
Thanks for your time.Its working now https://jsfiddle.net/sukchguj/.Now i can add new boxes by double-clicking and also reposition the old ones on a image background. – roadrunner009 Jan 12 '18 at 05:57

how to draw on a image background using canvas?

1 Answers1