CODEWITHSUNDEEP
javascripthtmlloopscanvasdrawimage
Ramon
Ramon

Reputation: 410

Trying to change dynamically a context.clip(); in a HTML5 canvas

I'm trying to to change dynamically a context.clip(); in a HTML5 canvas, drawing a shape with different values from an array. The idea is to get different parts of a board-game illuminated one after the other, clipping a darker version of the board to see just a square of the clearer version.

That's the code I'm struggling with, based in other questions from this very site, but I really cannot find the error:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Trivial</title>

<script type="text/javascript">

var strings = new Array();
strings[0] = "context.moveTo(134,487);context.lineTo(169,435);context.lineTo(200,449);context.lineTo(172,508);";
strings[1] = "context.moveTo(102,461);context.lineTo(142,414);context.lineTo(169,434);context.lineTo(133,485);";
strings[2] = "context.moveTo(71,434);context.lineTo(120,394);context.lineTo(143,414);context.lineTo(99,461);";
strings[3] = "context.moveTo(49,403);context.lineTo(101,370);context.lineTo(121,394);context.lineTo(70,435);";
strings[4] = "context.moveTo(19,340);context.lineTo(78,320);context.lineTo(99,370);context.lineTo(48,404);context.lineTo(31,375);";
strings[5] = "context.moveTo(172,507);context.lineTo(198,449);context.lineTo(231,458);context.lineTo(211,522);";
strings[6] = "context.moveTo(259,531);context.lineTo(267,466);context.lineTo(230,460);context.lineTo(213,521);";
strings[7] = "context.moveTo(257,531);context.lineTo(266,468);context.lineTo(300,470);context.lineTo(334,466);context.lineTo(347,531);context.lineTo(302,534);";

var images = new Array();

function draw(i){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = 'board_dark.jpg';
    img.onload = function() {
        context.drawImage(img,0,0);
    }
    images[i] = new Image();
    images[i].onload = function() {
        eval(strings[Math.floor(Math.random()*6)]);
        context.closePath();
        context.clip();
        context.drawImage(images[i],0,0);
        i = i + 1;
        window.setTimeout(function(){draw(i)},100);
    }
    images[i].src = 'board.jpg';
}

</script>
</head>
<body onLoad="draw(0);">
<canvas id="myCanvas" width="1024" height="1024"></canvas>
</body>
</html>

Am I coding terribly? I've been changing ways of writing, trying not to use the eval(), etc., without success...

Thank you for your help, as always!

Ramon

PD- Sorry for my English!

Upvotes: 1

Views: 858

Answers (2)

sws
sws

Reputation: 301

Just a comment on the coding style; the use of eval() to call your context.moveTo logic is all kinds of bad. Check Google for various reasons on "why eval is bad"; it's been mentioned elsewhere numerous times.

Instead of storing commands, store the coordinates as polygon-style objects, and iterate through the points in order to achieve the desired result.

I realize that this could be a simple demo written to illustrate a specific purpose, but if you're sharing the code at all, then you'll be sharing bad code. Consider revising.

Upvotes: 0

Simon Sarris
Simon Sarris

Reputation: 63812

Your code is really really strange. I've redone some of it to give you a better idea of how to go about coding this (without using eval, for one!)

http://jsfiddle.net/p6tXv/

Now there is a general function that will draw from a list of points that you give it (they are the same points you supplied).

You almost certainly don't want to use clip and a dark image, instead you should be drawing over the board with semi-transparent black.

I wrote the code in such a way that it will black out the spots. If you want to black out everything except the spots then you will have to write a pat that is a little more complex, but it shouldn't be that hard.

Upvotes: 1

Related Questions