<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid
#d3d3d3;" onmousedown="my_click()">
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
function my_click(){
let posX = Math.floor(Math.random()*500)+10;
let posY = Math.floor(Math.random()*500)+10;
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fillRect(posX,posY, 10, 500);
ctx.fillRect(posX,posY-500, 10, 500);
ctx.fillRect(posX,posY, 500, 10);
ctx.fillRect(posX-500,posY, 500, 10);
}
</script>
</body>
</html>
|