canvas 2 фигуры заливаются одним и тем же цветом

Question

Почему фигуры заливаются одним и тем же цветом?

context.beginPath();
context.fillStyle = "rgba(115,203,253,0.562)";
context.moveTo(175,115);
context.lineTo(175,130);
context.lineTo(625,130);
context.lineTo(650,115);
context.fill();
context.fillStyle = "rgba(225,203,253,1)";
context.moveTo(175,185);
context.lineTo(175,195);
context.lineTo(312,195);
context.lineTo(312,185);
context.fill();
context.closePath();

Answer 1

Вы пути не закрываете после рисования, не забывайте добавлять новый beginPath если начинаете новую фигуру или закрывающий closePath, когда закончили работу с фигурой.

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

context.beginPath();
context.fillStyle = "rgba(115,203,253,0.562)";
context.moveTo(175,115);
context.lineTo(175,130);
context.lineTo(625,130);
context.lineTo(650,115);
context.fill();

context.beginPath();
context.fillStyle = "rgba(225,203,253,1)";
context.moveTo(175,185);
context.lineTo(175,195);
context.lineTo(312,195);
context.lineTo(312,185);
context.fill();
context.closePath();

canvas{
  outline: 1px solid grey;
}

<canvas id="canvas" width="700px" height="400px"></canvas>

Answer 2

Никогда не нравились мне эти долгие инструкции для canvas. Есть же отличная и лаконичная Path2D с возможностью описать путь в одной строке. Конструктор Path2D принимает строку в которой буквой M обозначается начало пути, а буквой Z путь замыкается. Для отдельных элементов пути есть несколько однобуквенных обозначений, где заглавная буква означает, что путь указан абсолютный, а маленькой - относительный.

let canvas = document.getElementById('canvas');
let w = canvas.width = 600;
let h = canvas.height = 200;
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(60,60,60,1)';
ctx.fillRect(0,0,600,200);


ctx.fillStyle = 'rgba(115,203,253,0.562)';
let rect1 = new Path2D('M10 10 h 500 v 20 h -500 Z'); // h - горизонтальная линия, v - вертикальная (для них нужен только один параметр: перемещение по x и по y соответственно
ctx.fill(rect1);

ctx.fillStyle = 'rgba(225,203,253,1)';
let rect2 = new Path2D('M10 40 l 300 0 l 0 20 l -300 0 Z'); // l - прямая с относительными координатами (указываю только разницу смещения по координатам x,y)
ctx.fill(rect2);

ctx.fillStyle = 'rgba(220,30,50,1)';
ctx.fill(new Path2D(`M 10 70 L ${w - 400} 70 L ${w-400} 90 L 10 90 Z`)); // Можно и короче описать инструкцию. L - прямая с абсолютными координатами.

<canvas id="canvas"></canvas>

БЛОГ НА HUSL

canvas 2 фигуры заливаются одним и тем же цветом

Ответы (2 шт):