CODEWITHSUNDEEP
javascripthtmlcanvas
Yahoo
Yahoo

Reputation: 4187

HTML5 Canvas - Coloring Problem

I am using the Following Code. It works fine but the problem is that when i Change the colour of my pencil, then the things that i have already drawn on the canvas its colour also changes. I cant figure it out why is it happening and how to fix it , Any Idea's ?

 <script type="text/javascript"> 

function cnvs_getCoordinates(e) {

    x = e.clientX + document.body.scrollLeft;
    y = e.clientY + document.body.scrollTop;
    var c = document.getElementById("coordiv");
    var context = c.getContext("2d");
    context.lineWidth = 5;
    context.strokeStyle = document.getElementById("dcol").value;

    if (started == 1) {
        context.lineTo(x, y);
        context.stroke();
    }
    else {
        context.moveTo(x, y);
    }
}

function a() {
    started = 1;
    context.beginpath();
}

function b() {
    started = 0;
    context.closePath();
}

</script>

The HTML part is

    <body>
<div style="border: thin solid black">hi
  <canvas id="coordiv"   onmousemove="cnvs_getCoordinates(event)" onmousedown="a()" onmouseup="b()" > </canvas>

   <select  id="dcol" name="Colour">
              <option value="black" selected="selected">Black</option>
              <option value="red">Red</option>
              <option value="green"> Green</option>
              <option value="blue">Blue</option>
              <option value="white">** ERASER **</option>
            </select>
</div>
</body>

Upvotes: 0

Views: 937

Answers (1)

Zevan
Zevan

Reputation: 10235

There were a few odd things about your code that I took the liberty of fixing. For instance, no need to keep calling getContext() all the time, just call it once. Same goes for getElementById() no need to call it more than once. I also moved your events out of the canvas tag and into the javascript. I was really puzzled by your problem when I first experienced it. The order of your calls to stroke() and closePath() seemed a little wonky... I fixed that, but that turned out not to be the problem... in the end your only problem was that you wrote "beginpath()" instead of "beginPath()".

Have a look at the fixed version on jsFiddle.

Upvotes: 1

Related Questions