25.04.2025

Заливка цветом

<html>
<head>
<title>Рисунок</title>
</head>
<body bgcolor="LightGreen">
<h1>Это canvas</h1>

<canvas id="namevasya" width="1500" height="1000" style="background: LightCyan;"></canvas>

<script>
   /* Не изменяемая часть */
   var canvas = document.getElementById('namevasya');
   var ctx = canvas.getContext('2d');
   /* ---------------------- */

   ctx.beginPath();  /* начало */

   ctx.moveTo(750,100);
   ctx.lineTo(500,500);
   ctx.lineTo(1000,500);
   ctx.lineTo(750,100);
   ctx.fillStyle="red";
   ctx.fill();

   ctx.stroke();   /* конец */
//---------------------------Отдельный объект для заливки. Чтобы залить другим цветом------------------------------
   ctx.beginPath();  /* начало */

   ctx.moveTo(800,50);
   ctx.arc(750,50,50,0,2*Math.PI);
   ctx.fillStyle="green";
   ctx.fill();

   ctx.stroke();


</script>


</body>
</html>