Javascript свойства и методы элемента canvas

Значения¶

Значение по умолчанию:

Значение по умолчанию. Исходное изображение накрывает целевое
Исходное изображение накладывается поверх целевого. При этом часть исходного изображения, которая выходит за границы целевого изображения, не отображается
Исходное изображение отображается внутри целевого изображения. При этом отображается только та часть исходного изображения, которая находится в границах целевого изображения. Само целевое изображение становится прозрачным
Исходное изображение отображается вне границ целевого изображения. При этом отображается только та часть исходного изображения, которая находится за пределами целевого изображения. Само целевое изображение становится прозрачным
Целевое изображение накрывает исходное
Целевое изображение накладывается поверх исходного. При этом часть целевого изображения, которая выходит за границы исходного изображения, не отображается
Целевое изображение отображается внутри исходного изображения. При этом отображается только та часть целевого изображения, которая находится в границах исходного изображения. Само исходное изображение становится прозрачным
Целевое изображение отображается вне границ исходного изображения. При этом отображается только та часть целевого изображения, которая находится за пределами исходного изображения. Само исходное изображение становится прозрачным
Отображает исходное изображение + целевое изображение
Отображает исходное изображение. Целевое изображение игнорируется
Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ
Пиксели верхнего слоя умножаются на соответствующий пиксель нижнего слоя.
Пиксели инвертируются, умножаются и снова инвертируются.
Сочетание умножения и экрана. Темные части базового слоя становятся темнее, а светлые части становятся светлее.
Сохраняет самые темные пиксели обоих слоев.
Сохраняет самые светлые пиксели обоих слоев.
Делит нижний слой на перевернутый верхний слой.
Делит инвертированный нижний слой на верхний, а затем инвертирует результат.
Комбинация умножения и экрана, как наложение, но с заменой верхнего и нижнего слоя.
Более мягкая версия жесткого света. Чистый черный или белый не приводит к чистому черному или белому.
Вычитает нижний слой из верхнего слоя или наоборот, чтобы всегда получать положительное значение.
Как , но с более низким контрастом.
Сохраняет яркость и цветность нижнего слоя, принимая оттенок верхнего слоя.
Сохраняет яркость и оттенок нижнего слоя, принимая цветность верхнего слоя.
Сохраняет яркость нижнего слоя, принимая оттенок и цветность верхнего слоя.
Сохраняет оттенок и цветность нижнего слоя, принимая яркость верхнего слоя.

Проблема и существующие альтернативы

Определите проблему клиента и выявите конкурентов.

Какая проблема есть у клиента?

Посмотрите на все сегменты покупателей из первого блока и сформулируйте, какую их потребность закрывает продукт.

Например, вы придумали новую социальную сеть для нетворкинга. Её главная цель — познакомить специалистов из разных сфер для общих проектов. Такой продукт закрывает потребность клиента в общении и поиске профессиональных связей.

Кто уже решает эту проблему?

Выявите всех существующих конкурентов продукта. Любую проблему уже кто-то решает, но кто — не всегда очевидно. Если ваш продукт — сервис вызова такси, и вы закрываете потребность клиента в комфортном передвижении, то ваши конкуренты — не только аналогичные сервисы, но и компании, которые продают автомобили, велосипеды или самокаты.

Ответить на эти вопросы и ориентироваться на потребности пользователя помогает концепция Jobs To Be Done — «работа, которая должна быть выполнена».

Блок № 3

Ссылки

Gecko

  1. , Mozilla, https://developer.mozilla.org/en/WebGL>
  2. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=310682>
  3. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=333613>
  4. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=540456>
  5. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=436904>
  6. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=433004>
  7. ↑ , https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas>
  8. , Mozilla, https://bugzilla.mozilla.org/show_bug.cgi?id=498826>

Webkit

  1. , https://developer.apple.com/safari/library/documentation/appleapplications/conceptual/SafariJSProgTopics/Tasks/Canvas.html>

Presto

  1. , http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha>
  2. , http://www.opera.com/docs/specs/presto211/canvas/>
  3. , http://www.opera.com/docs/specs/presto25/canvas/>
  4. , http://www.opera.com/docs/specs/presto26/canvas/>
  5. , http://www.opera.com/docs/specs/presto27/#changes>

License

(The MIT License)

Copyright (c) 2010 LearnBoost, and contributors dev@learnboost.com>

Copyright (c) 2014 Automattic, Inc and contributors dev@automattic.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the ‘Software’), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Пути

Метод Описание
fill() Заполняет текущий чертеж (путь)
stroke() На самом деле рисует путь, который вы определили
beginPath() Начало пути или сброс текущего пути
moveTo() Перемещение контура в указанную точку на холсте без создания линии
closePath() Создание контура от текущей точки до начальной точки
lineTo() Добавляет новую точку и создает линию от этой точки до последней указанной точки на холсте
clip() Обрезает область любой формы и размера из исходного полотна
quadraticCurveTo() Создание квадратичной кривой Безье
bezierCurveTo() Создание кубической кривой Безье
arc() Создание дуги/кривой (используется для создания окружностей или частей окружностей)
arcTo() Создание дуги/кривой между двумя касательными
isPointInPath() Возвращает значение true, если указанная точка находится в текущем пути, в противном случае false

Use multiple layered canvases for complex scenes

As mentioned before, drawing large images is expensive and should be
avoided if possible. In addition to using another canvas for rendering
off screen, as illustrated in the pre-rendering section, we can also use
canvases layered on top of one another. By using transparency in the
foreground canvas, we can rely on the GPU to composite the alphas
together at render time. You might set this up as follows, with two
absolutely positioned canvases one on top of the other.

The advantage over having just one canvas here, is that when we draw or
clear the foreground canvas, we don’t ever modify the background. If
your game or multimedia app can be split up into a foreground and
background, consider rendering these on separate canvases to get a
significant performance boost. The following graph compares the naive
single canvas case to one where you merely redraw and clear the
foreground (jsperf):

You can often take advantage of imperfect human perception and render
the background just once or at a slower speed compared to the foreground
(which is likely to occupy most of your user’s attention). For example,
you can render the foreground every time you render, but render the
background only every Nth frame.

Also note that this approach generalizes well for any number of
composite canvases if your application works better with a this sort of
structure.

Colors, Styles, and Shadows

Property Description
fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing
strokeStyle Sets or returns the color, gradient, or pattern used for strokes
shadowColor Sets or returns the color to use for shadows
shadowBlur Sets or returns the blur level for shadows
shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY Sets or returns the vertical distance of the shadow from the shape
Method Description
createLinearGradient() Creates a linear gradient (to use on canvas content)
createPattern() Repeats a specified element in the specified direction
createRadialGradient() Creates a radial/circular gradient (to use on canvas content)
addColorStop() Specifies the colors and stop positions in a gradient object

Трансформации

Последнее обновление: 31.10.2016

Элемент canvas поддерживает трансформации — перемещение, вращение, масштабирование.

Перемещение

Перемещение осуществляется с помощью метода translate():

translate(x, y)

Первый параметр указывает на смещение по оси X, а второй параметр — по оси Y.

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);
			
context.translate(100, 50);	// смещение на 100 пикселей вправо и 50px вниз

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);

Здесь на одной позиции отрисовываются два равных прямоугольника: синий и красный. Однако к красному прямоугольнику применяется трансформация перемещения:

Вращение

Для поворота фигур на canvase применяется метод rotate():

rotate(angle)

В этот метод в качестве параметра передается угол поворота в радианах относительно точки с координатами (0, 0).

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);
			
context.rotate(.52);	// поворот на 0.52 радиан или 30 градусов

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(50, 50, 100, 100);

Масштабирование

Для масштабирования фигур применяется метод scale():

scale(xScale, yScale)

Параметр указывает на масштабирование по оси X, а — по оси Y.

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
context.fillStyle = "blue";
context.fillRect(30, 30, 100, 100);
			
context.scale(1.5, 1.3); // растяжение по ширине в 1.5 раза и сжатие по высоте в 1.3 раза

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(50, 30, 100, 100);

Матрица преобразований

При необходимости мы можем применять последовательно несколько преобразований:

ctx.scale(1.5, 1.3);
ctx.translate(100, 150);
ctx.rotate(0.34);

Но контекст элемента canvas также предоставляет метод transform(), который позволяет задать матрицу преобразования:

transform(a, b, c, d, e, f)

Все параметры этого метода последовательно представляют элементы матрицы преобразования:

  • : масштабирование по оси X

  • : поворот вокруг оси X

  • : поворот вокруг оси Y

  • : масштабирование по оси Y

  • : горизонтальное смещение

  • : вертикальное смещение

Например:

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
context.fillStyle = "blue";
context.fillRect(100, 50, 100, 100);
			
context.transform(	
	Math.cos(Math.PI/6), Math.sin(Math.PI/6), -1 * Math.sin(Math.PI/6), 
	Math.cos(Math.PI/6), 0, 0);

context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(100, 50, 100, 100);

Замена трансформации

При последовательном применении разных трансформаций они просто последовательно применяются к фигурам. Однако может возникнуть ситуация, когда надо применить трансформацию
не вместе со другими, а вместо других, то есть заменить трансформацию. Для этого применяется метод setTransform():

setTransform(a, b, c, d, e, f)

Его параметры представляют матрицу преобразования, и в целом его применение аналогино применению метода . Например:

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
var k = 0;
for (var x = 0; x 

Сброс трансформаций

При применении трансформаций вся последующая отрисовка фигур подвергается данным трансформациям. Но возможна ситуация, когда после одиночного применения трансформации
нам больше не нужно ее применение. И для всей последующей отрисовки мы можем сбросить трансформации с помощью метода :

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
    context.fillStyle = "blue";
    context.fillRect(50, 50, 100, 100);
			
	context.translate(100, 50);
	// дальше применяется трансформация
	context.globalAlpha = 0.5;
    context.fillStyle = "red";
    context.fillRect(50, 50, 100, 100);
			
	context.resetTransform();
	// трансформация больше не применяется
	context.fillStyle = "green";
    context.fillRect(0, 0, 100, 100);

НазадВперед

Знакомство с новым элементом

Canvas — это новый элемент HTML5, который предназначен для создания растрового изображения при помощи JavaScript. Само слово canvas переводится как холст или канва. Текст внутри тега будет проигнорирован браузером с поддержкой canvas и показан в браузере без поддержки canvas.

У тега есть два атрибута — height (высота) и width (ширина). Если размеры не указать, то по умолчанию размер холста будет равен 150х300 пикселей. Canvas создает область фиксированного размера, содержимым которого управляют контексты. Атрибуты не имеют отношения к CSS, они обозначают ширину и высоту canvas в пикселях не на экране, а на координатной плоскости холста.

Не рекомендуется использовать CSS для установки высоты и ширины холста, так как в этом случае canvas подвергнется масштабированию. Задавайте размеры в элементе.

Также требуется установить обязательный идентификатор для обращению к элементу в JavaScript.

Также можно применить стиль, например, сделаем рамку вокруг холста и не будем устанавливать размеры, чтобы увидеть ширину и высоту по умолчанию.

Canvas

Сейчас все современные браузеры поддерживают canvas. Если такой уверенности нет, то можно устроить небольшую проверку.

Мы находим элемент canvas по идентификатору, а затем вызываем метод getContext() с единственным параметром — строкой 2d. Если getContext() возвращает ответ, мы получаем 2D-контекст холста для добавления объектов.

Размер холста можно вычислить программно через свойства canvas.width и canvas.height.

Test Case

const http = require(`http`);
const {fabric} = require(`fabric`);

const server = http.createServer((req, res) => {
  let {url} = req;
  if (url === `/`) {
    console.log(`Rss ${+process.memoryUsage().rss  1024  1024 }MB`);
    console.log(`Heap ${+process.memoryUsage().heapUsed  1024  1024 }MB`);

    const canvas = new fabric.Canvas(`canvas`, {
      width 600,
      height 600
    });

    const JSON = `{"version":"2.3.3","objects":[{"type":"image","version":"2.3.3","originX":"left","originY":"top","left":264,"top":278.5,"width":600,"height":600,"fill":"rgb(0, 0, 0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.39,"scaleY":0.39,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://content0.printio.ru/assets/images/large/26a1fb4ae16cbe53aaa07ab44e31f44cd73fd5d3.png?1525104682","filters":[]}],"background":"red"}`;

    canvas.loadFromJSON(JSON, function () {
      let pngStream = canvas.createPNGStream();

      res.writeHead(200, {
        'Content-Type' `image/png`
      });

      pngStream.on(`data`, function (chunk) {
        res.write(chunk);
      });

      pngStream.on(`error`, function (exception) {
        console.log(`Error on stream ${exception}`);
      });

      pngStream.on(`end`, function () {
        res.end();
        canvas.clear();
        canvas.dispose();
        if (global.gc) {
          global.gc();
        }
      });
    });
  }
});
server.listen(8124, () => {
  console.log(`Server is runing on http://localhost:8124`);
});
➜  server git:(master) ✗ node --expose-gc .
Server is runing on http://localhost:8124
Rss 76.65625MB
Heap 23.975570678710938MB
Rss 82.1875MB
Heap 24.32623291015625MB
Rss 88.54296875MB
Heap 24.335586547851562MB
Rss 91.65234375MB
Heap 22.522903442382812MB
Rss 92.5MB
Heap 22.56616973876953MB
Rss 94.1953125MB
Heap 22.5391845703125MB

Линии и дуги

Мы можем рисовать прямые и изогнутые линии, окружности и другие фигуры. Замкнутые линии можно заливать цветом. В отличии от рисования прямоугольников, рисование линий это не одна команда, а их последовательность. Так, сначала надо объявить начало новой линии с помощью beginPath(), а в конце сказать от том, что рисование линии заканчивается с помощью closePath(). У каждого отрезка линии есть начало и конец.

beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» снова.

closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.

Завершающий шаг — это вызов методов stroke или fill. stroke обводит фигуру линиями, а fill заливает фигуру сплошным цветом.

Также существуют такие методы как,

  • moveTo(x, y) — перемещает «курсор» в позицию x, y и делает её текущей
  • lineTo(x, y) — ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
  • arc(x, y, radius, startAngle, endAngle, anticlockwise) — рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление

Давайте нарисуем ломаную, состоящую из двух отрезков:

Если набор отрезков будет замкнут, то у нас получится полигон, который можно залить цветом. Создадим и зальём треугольник с помощью функции fill().

Изменяем ширину линии

Значение ширины линии хранится в свойстве lineWidth контекста canvas и одна единица соответствует одному пикселю. Значение по умолчанию естественно 1.0

Стиль верхушки линий

Стиль верхушки линии хранится в свойстве lineCap и для него существуют три возможных значения:

  • butt (по умолчанию)
  • round
  • sqare

Стиль соединения линий

Стиль соединения линий хранится в свойстве lineJoin и может принимать три возможных значения:

  • miter (по умолчанию)
  • round
  • bevel

Мы можем ограничить длину огромного хвоста miter с помощью свойства miteLimit, которое по умолчанию принимает значение 10.

Градиенты

Линейные градиенты

Сначала создаётся объект градиента при помощи функции createLinearGradient(float x1, float y1, float x2, float y2) из точки (x1; y1) в точку (x2; y2). Затем добавляются цвета при помощи функции addColorStop(float offset, string color), где offset — отступ со значениями от 0 до 1, а color — нужный цвет. Далее созданный градиент применяется как стиль заливки в свойстве fillStyle.

Радиальные градиенты

Радиальный градиент создаётся с помощью функции createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2) — плавный переход цвета из окружности с центром в точке (x1; y1) и радиусом r1 в окружность с центром точке (x2; y2) и радиусом r2.

Нарисуем шар с псевдо-освещением

Настройка рисования

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»date»>Последнее обновление: 31.10.2016

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

  • strokeStyle: устанавливает цвет линий или цвет контура. По умолчанию установлен черный цвет

  • fillStyle: устанавливает цвет заполнения фигур. По умолчанию установлен черный цвет

  • lineWidth: устанавливает толщину линий. По умолчанию равно 1.0

  • lineJoin: устанавливает стиль соединения линий

  • globalAlpha: устанавливает прозрачность отрисовки на canvas

  • setLineDash: создает линию из коротких черточек

В прошлой теме при отрисовке прямоугольников мы явным образом не устанавливали никаких цветов, поэтому для цвета линий и заливки прямоцгольников
использовался цвет по умолчанию — черный. Теперь используем други цвета:

Чтобы рисовать какие-то видимые фигуры, нам нужно задать цвет. Установить цвет можно разными способами. Во-первых, мы можем задать цвет контура или
границы фигур с помощью свойства strokeStyle:

Canvas в HTML5
            Ваш браузер не поддерживает Canvas
        

В качестве значения свойства и получают название цвета в виде строки, либо в виде шестнадцатиричного
значения цвета (например, «#00FFFF»), либо в виде значений rgb («rgb(0, 0, 255)») и rgba («rgba(0, 0, 255, 0.5)»).

Свойство позволяет установить толщину линии:

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
				
context.strokeStyle = "red";
context.fillStyle = "blue";
context.lineWidth = 6.5;

context.strokeRect(50, 40, 100, 100);
context.fillRect(50, 40, 100, 100);

setLineDash

Метод в качестве параметра принимает массив чисел, которые устанавливают расстояния между линиями. Например:

Canvas в HTML5
            Ваш браузер не поддерживает Canvas
        

Тип соединения линий

Свойство отвечает за тип соединения линий в фигуре. Оно может принимать следующие значения:

  • : прямые соединения, которые образуют прямые углы. Это значение по умолчанию

  • : закругленные соединения

  • : конические соединения



    Canvas в HTML5
            Ваш браузер не поддерживает Canvas
        

Прозрачность

Свойство задает прозрачность отрисовки. Оно может принимать в качестве значения число от 0 (полностью прозрачный) до 1.0 (не прозрачный):

var canvas = document.getElementById("myCanvas"), 
    context = canvas.getContext("2d");
                 
context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);
			
context.globalAlpha = 0.5;
context.fillStyle = "red";
 context.fillRect(100, 100, 100, 100);

Здесь на canvas выводятся два прямоугольника: синий и красный. Но до вывода красного прямоугольника установлена полупроразность отрисовки, поэтому
сквозь красный прямоугольник мы сможем увидеть и синий:

НазадВперед

TagCanvas in Internet Explorer

The element is not supported by Internet Explorer
versions up to and including version 8. However, the tag cloud above should be
working in IE thanks to the ExplorerCanvas Javascript include file
that translates canvas functions into IE’s VML. It is a bit slow, but it does
work. Mostly.

At the time of writing you must use the latest trunk version of
ExplorerCanvas, as the current version in the project downloads area does not
have the required text output support.

Note again: the fading of image tags with distance does not work with
the current version of Explorer Canvas. I’ve created a modified version of
excanvas.js to make it work, which you can get from .
If you don’t use image tags, or don’t want images to fade with distance, then
you should use the latest version from the Google code site linked above.

Internet Explorer 9 does support the canvas element, so excanvas.js is not required.
The conditional comment required to include excanvas.js for earlier versions should
look like this:

script src="tagcanvas.min.js" type="text/javascript">script>

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

Note: Always specify an attribute (to be referred to in a script),
and a and attribute to define the size of the canvas. To add a border, use the attribute.

Here is an example of a basic, empty canvas:

Your browser does not support the canvas element.

Example

Example

var c = document.getElementById(«myCanvas»);var ctx = c.getContext(«2d»);
ctx.moveTo(0, 0);ctx.lineTo(200, 100);
ctx.stroke();

Example

var c = document.getElementById(«myCanvas»);var ctx = c.getContext(«2d»);
ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx.stroke();

Example

var c = document.getElementById(«myCanvas»);var ctx = c.getContext(«2d»);
ctx.font = «30px Arial»;ctx.fillText(«Hello World», 10, 50);

Example

var c = document.getElementById(«myCanvas»);var ctx = c.getContext(«2d»);
ctx.font = «30px Arial»;ctx.strokeText(«Hello World», 10, 50);

Example

var c = document.getElementById(«myCanvas»);
var ctx = c.getContext(«2d»);
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Example

var c = document.getElementById(«myCanvas»);
var ctx = c.getContext(«2d»);
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, «red»);
grd.addColorStop(1, «white»);
// Fill with gradient
ctx.fillStyle = grd;ctx.fillRect(10, 10, 150, 80);

Draw Image

var c = document.getElementById(«myCanvas»);
var ctx = c.getContext(«2d»);
var img = document.getElementById(«scream»);
ctx.drawImage(img, 10, 10);

Ссылка на основную публикацию