Home/ Questions/Q 7397855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T03:48:00+00:00

I’m trying to to change dynamically a context.clip(); in a HTML5 canvas, drawing a

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0