In general, this is the case: it is necessary to create a page with a background of any color, when clicking to any area of ​​which the painting of a certain size is performed.

Here is the actual code itself:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page</title> <script type = "text/javascript" src="jquery-3.3.1.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <form> <div id="myCanvas" width="300"; height="300"; background-color: blue></div> <script type="text/javascript"> $('body').click(function(){ let c = document.getElementById("myCanvas"); let ctx = c.getContext("2d"); ctx.fillRect(20, 20, 150, 100); }); </script> </form> </body> </html>

Screenshot:

enter image description here

  • Do you want to paint over the highlighted square? - Vitaliy Shebanits 2:51 pm
  • it is not clear what you need. There is a button to править , click on it and complete the question - michael_best
  • I’ll upload a screenshot of what I need to do. - Ivan Labozhevich

1 answer 1

 var canvas = document.getElementById('canv'); canvas.addEventListener('click', function(e){ if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(e.clientX - 30, e.clientY - 85 , 50, 50); } }); 
 #canv { width: 300px; height: 300px; background-color:red; } 
 <canvas id="canv"> </canvas>

Determination of coordinates

Drawing on canvas

  • @IvanLabozhevich if my answer helped you, I will be grateful that you will choose it as a rule (put a tick on the left) - Vitaly Shebanits