I need to tie graphic editing to the current project. I can not find a solution for icing shapes. For example, there is a certain circle (or any other shape) and a certain square, I need to combine them (or create a new object of such a shape).

enter image description here

How can this be done on canvas? Is there any simple mechanism, since such transformations should take place often? Is it possible to somehow get the area?

Shl

Advise me to read about canvas, I find only the basics.

    1 answer 1

    var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); ctx.fillStyle = 'lime'; ctx.fillRect(20, 20, 80, 80); var can2 = document.getElementById('canvas2'); var ctx2 = can2.getContext('2d'); ctx2.beginPath(); ctx2.fillStyle = "green"; ctx2.arc(100, 60, 40, 0, Math.PI * 2, 1); ctx2.fill(); var can3 = document.getElementById('canvas3'); var ctx3 = can3.getContext('2d'); ctx3.drawImage(can, 0, 0); ctx3.drawImage(can2, 0, 0); 
     <canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas> <canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas> <canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>

    • You have two different figures on canvas3, I’m interested in a grip that would be exactly one. Because I will have problems scaling items, etc. - VINET