2

I'm trying to make a website where an image is drawn on Canvas, then later the user is able to press a button to ctx.fill() certain parts of it with color. I'm running into issues where I can only ctx.fill() the most recently created shape which often isn't the shape I want.

Here's an example. In this code (live at http://build.rivingtondesignhouse.com/piol/test/) I'm trying to draw the first rectangle, then save() it on the stack, then draw the second rectangle (and don't save it), then when my fill() function is called I want to restore() the first rectangle and ctx.fill() it with a different pattern. It doesn't work!

In practice, I'm actually trying to fill the gray part of this complex shape with any color the user chooses AFTER the image has been drawn, but I think the technique is the same. (http://build.rivingtondesignhouse.com/piol/test/justTop.html)

Thanks in advance for any help!!!

Here's the code:

<script type="text/javascript">
var canvas;
var ctx;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}


function draw() {   
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0,0,15,150);
    ctx.save();

    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30,0,30,150);
}

function fill(){
    var image = new Image();
    image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
    image.onload = drawPattern;
    function drawPattern() {
        ctx.restore();
        ctx.fillStyle = ctx.createPattern(image, "repeat");
        ctx.fill();
    }
}

init();

user1559817
  • 21
  • 1
  • 2
  • http://jsfiddle.net/BJTzx/ That should get you started! Best.. – Shouvik Jul 28 '12 at 16:59
  • Thanks. This is the code I posted that doesn't work, but in JSFiddle. Can you help me find a solution? – user1559817 Jul 28 '12 at 18:43
  • right click on the place where you see it work on fiddle. You should be able to see the source of the HTML. It stands out... Copy paste that and compare with what you did wrong. (hint, check the source of the result section!) – Shouvik Jul 28 '12 at 19:18
  • But the source I'm looking at is the wrong code. I added a link to call the fill() function. I want that link to make the *first* rectangle fill(). http://jsfiddle.net/BJTzx/1/ – user1559817 Jul 28 '12 at 21:17

1 Answers1

1

There are a few misunderstands that we need to clear up before I can answer the question.

save() and restore() do not save and restore the canvas bitmap. Instead they save and restore all properties that are set on the canvas context and that's all!

For example

ctx.fillStyle = 'red';
ctx.save(); // save the fact that the fillstyle is red
ctx.fillStyle = 'blue'; // change the fillstyle
ctx.fillRect(0,0,5,5); // draws a blue rectangle
ctx.restore(); // restores the old context state, so the fillStyle is back to red
ctx.fillRect(10,0,5,5); // draws a red rectangle // draws a red rectangle

See that code live here.

So you aren't saving a rectangle (or anything drawn) by calling save(). The only way you you can save the bitmap is by drawing it (or part of it) to another canvas (using anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0)) or by saving enough information that you can redraw the entire scene with the appropriate changes.

Here is an example of one way you could re-structure your code so that it does what you want: http://jsfiddle.net/xwqXb/

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • I think, you can also "save" the bitmap from canvas, by "serializing" it to a string -- calling `toDataURL`. – trejder Jan 22 '14 at 21:04