Как добавить canvas на страницу, как рисовать с помощью javascript на стороне пользователя

С помощью элемента Канвас и джаваскрипта можно рисовать не устройствах пользователя, не тратя ресурсы своего сервера.

Элемент Canvas задает прямоугольную область на странице где можно применять растровую графику. На страницу можно вставлять от одного до бесконечности канвасов с разными id. По умолчанию - канвас прозрачный, без границ, размерами 300х150 пикселей.

Если зададь размеры, используя CSS, допустим, 600х200, то canvas размером 300х150 пикселов подвергнется масштабированию в соответствии с этими новыми параметрами, равно как и все, что будет в нем нарисовано. Это сродни масштабированию изображения путем задания для него новых ширины и высоты, которые больше или меньше, чем реальные ширина и высота этого изображения. А при увеличении на изображении будет наблюдаться пикселизация.

test
<br>
<canvas id="draw" width="600" height="200"></canvas>
 test test test test test test test test test test test
<br>1234567 6

и стиль в теге head: canvas {border: 1px solid black;} на странице будет выглядеть так:

Как узнать поддержку браузером элемента Canvas.

Можно изменить заливку канвас: canvas {border: 1px solid black;background-color:red;}

Сразу рисовать в канвас нельзя, нужно определить объект context в котором есть методы и свойства для рисования в 2D.

Для рисования в 3D используйте библиотеку WebGL (SpiderGL, SceneJS, three.js)

Добавляем джаваскрипт код и нарусуем два прямоугольника с помощью метода fillRect:

window.onload = function() {
	// ищем ссылку на объект канвас в DOM
        var canvas = document.getElementById ("draw");
        // по протоколу мы должны определить контекст для рисования 2d и присвоить переменной
	context = canvas.getContext ("2d");
        // рисуем квадрат и прямоугольник
        // где x,y - координаты от левого верхнего угла и размеры области в пикселах
	context.fillRect (10,10,55,55);
	context.fillRect (60,70,25,35);
}

По умолчанию цвет заливки черный, чтобы поменять цвет использовать метод fillstyle:

context.fillStyle = "lightblue";

стулом к canvas. Используя f illstyle и f illRect, вы сначала задаете свойство, которое говорит элементу canvas следующее: «Все, что будет нарисовано в тебе далее, должно иметь данный цвет». Таким образом, все, к чему вы станете применять заливку цветом (например, с помощью fillRect) после задания свойства fillstyle, будет иметь данный цвет, пока вы снова не измените цвет, присвоив fillstyle другое значение цвета.