Статьи / JavaScript / Canvas

Рисуем прямоугольник

var x = document.getElementById("canvas");
canvas = x.getContext("2d");
canvas.strokeStyle = "#6BA0FF";
canvas.strokeRect(5, 5, 300, 150); // рисует обводку прямоугольника шириной 300 и высотой 150 px
canvas.fillStyle = "#B451A9";
canvas.fillRect(8, 8, 280, 140); // заливка прямоугольника шириной 300 и высотой 150 px
canvas.clearRect(30, 20, 100, 50); // очищаем прямоугольник начиная с координат 30 20 шириной,высотой 200, 50

var x = document.getElementById("canvas2");
canvas = x.getContext("2d");
canvas.beginPath();
canvas.moveTo(20, 10);
canvas.lineTo(80, 10);
canvas.quadraticCurveTo(90, 10, 90, 20);
canvas.lineTo(90, 80);
canvas.quadraticCurveTo(90, 90, 80, 90);
canvas.lineTo(20, 90);
canvas.quadraticCurveTo(10, 90, 10, 80);
canvas.lineTo(10, 20);
canvas.quadraticCurveTo(10, 10, 20, 10);
canvas.fill();

var x = document.getElementById("canvas3");
canvas = x.getContext("2d");
canvas.lineWidth = 6; // толщина линии
canvas.beginPath();
canvas.moveTo(20, 10);
canvas.lineTo(80, 10);
canvas.quadraticCurveTo(90, 10, 90, 20);
canvas.lineTo(90, 80);
canvas.quadraticCurveTo(90, 90, 80, 90);
canvas.lineTo(20, 90);
canvas.quadraticCurveTo(10, 90, 10, 80);
canvas.lineTo(10, 20);
canvas.quadraticCurveTo(10, 10, 20, 10);
canvas.stroke();