🍪 🍕 💅🏽 Canvas API Memo 👨‍✈️ 👩🏿‍🤝‍👩🏼 🤑

Good day, friends!

This article is a small selection of examples of working with the Canvas API, which is convenient to refer to if necessary to recall the material studied.

This is not a guide to working with canvas, but only a demonstration of its capabilities.

For me, this is also a kind of subtotal in the study of canvas.

The code is divided into separate sandbox blocks, which are placed under the “cut” for readability.

A couple of important points.

The width and height of the canvas is better determined using the attributes:

<canvas width="300" height="300"></canvas>

If we want the entire viewing area to be a canvas, then we do the following:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

I usually define the canvas and the two-dimensional drawing context as follows:

const canvas = document.querySelector('canvas')
//     jQuery
const $ = canvas.getContext('2d')

Enough words.

Let's start with simple shapes.

Line:

Rectangle (square):

Triangle:

A circle:

Bezier curves:

Quadratic curves:

Cubic curves:

Let's do some experiments.

Line color:

Fill color:

Transparency (alpha channel):

Transparency (RGBA):

We move on.

Text:

Text (font) metrics:

Gradient:

Picture:

Pattern (Pattern):

We implement several functions.

Polygon Drawing Function:

Snowflake Drawing Function:

Text Wrap Function:

: .

The function of obtaining the coordinates of the cursor:

We move on.

Determine the color of the image:

( ) : harryheman.imtqy.com/art.jpg.

Draw the boot icon:

We implement cursor tracking:

Create an interactive text:

Canvas API Memo

More articles: