9

I've included all of my code in this fiddle: http://jsfiddle.net/RymyY/

My issues deal with the 'Add Shape' button on the left hand side.

I want to be able to add a new canvas every time the second add button is clicked, but i cannot get it to work. Similar code works in this fiddle here: http://jsfiddle.net/dzejkej/xwg5f/

I dont know why mine is not working. I have no idea whats wrong. Please help.

dopatraman
  • 13,416
  • 29
  • 90
  • 154
  • please specify. adding shapes in your code works fine for me. – supertopi Dec 15 '11 at 15:45
  • @TopiOjala--it worked in which fiddle? the top or the bottom? my problem is that the code works in the bottom fiddle (http://jsfiddle.net/dzejkej/xwg5f/) but not the top (http://jsfiddle.net/RymyY/). – dopatraman Dec 15 '11 at 15:48
  • It seems to work for me: I click "Begin", "Add shape", "Rectangle", "Add", and a rectangle is drawn in the upper left corner of the canvas. Subsequent rectangles are drawn over previous ones, of course. Obviously, circles are not implemented yet. So what functionality is missing, exactly? What exactly do you mean by "add a new canvas"? – Jan Pöschko Dec 15 '11 at 15:56
  • New rectangels are not drawn over the first one, it´s just that only the first canvas element are filled with a color. – Stefan Dec 15 '11 at 16:15

1 Answers1

19

You should not create multiple elements with the same ID as you are doing in the example code. document.getElementById('canvas'); always returns the first element with id "canvas", as it should.

var elementID = 'canvas' + $('canvas').length; // Unique ID

$('<canvas>').attr({
    id: elementID
}).css({
    width: rectWidth + 'px',
    height: rectHeight + 'px'
}).appendTo('#work_area');

var canvas = document.getElementById(elementID); // Use the created element

Here is a working example; http://jsfiddle.net/5b8NH/

Stefan
  • 5,644
  • 4
  • 24
  • 31