New projects and new features are going to be added soon. I am working on it, finally have some time. If you have any questions or suggestions, please contact me: workit.js@gmail.com. Currently I am working on BoostBalls project explanation.

This is a free project, and in order for it to continue being free, please consider supporting it.

Canvas API

CANVAS API is a collection of methods that allow you to create and manage your canvas. You can use the following functions in order to work with it:

Get access to CANVAS API

Before we start, we need to get access to CANVAS API. Canvas context provides us it. The following code is how to do that.

const canvas = document.querySelector("canvas"); // We need to find canvas first to get its context
const ctx = canvas.getContext("2d"); // context

First, we declare a variable that contains the canvas element. We can find the canvas using the document.querySelector method with appropriate selectors like canvas, .canvas, or #canvas.

const canvas = document.querySelector("canvas");

Then we need to get context using canvas method getContext and pass 2das an argument.

There are more kind of parameters of getContext. But we don't need them right now.

const ctx = canvas.getContext("2d");

Now we have an access to CANVAS API.

Canvas coordinates

1.0Canvas coordinates

1.1Canvas coordinates

Canvas coordinates (0, 0) start from upper left corner.

fillRect

ctx.fillRect(x, y, width, height);

fillRect - is a method that draws rectangle and fills it at once.

Method takes 4 parameters:

  • x - an x position of rectangle
  • y - an y position of rectangle
  • width - width of rectangle
  • height - height of rectangle

clearRect

ctx.clearRect(x, y, width, height);

clearRect - clears rectangle area with transparent color.

Method takes 4 parameters:

  • x - an x position of rectangle
  • y - an y position of rectangle
  • width - width of rectangle
  • height - height of rectangle

beginPath

ctx.beginPath();

beginPath - begins a new path or resets the current path. It is used for filling complex element for example.

Imagine path like a box. Inside of this box elements will be connected with each other. New path - new element.

fill

ctx.fill();

fill - fills the current path with the current fillStyle

fillStyle

ctx.fillStyle = <your color code>;

fillStyle - set color which will be used to fill path.

#fff - by default

Color can be passed by rgbawordshexhsl

stroke

ctx.stroke();

stroke - stroke the current path with the current strokeStyle [#fff - by default]

strokeStyle

ctx.strokeStyle = <your color code>;

strokeStyle - set color which will be used to stroke path.

#fff - by default

Color can be passed by rgbawordshexhsl

rect

ctx.rect(x, y, width, height);

rect - mark rectangle area with transparent color.

To fill or stroke marked rectangle use fill() or stroke()

Method takes 4 parameters:

  • x - an x position of rectangle
  • y - an y position of rectangle
  • width - width of rectangle
  • height - height of rectangle

arc

ctx.arc(x, y, radius, startAngle, endAngle, counterClockWise);

arc - mark a circle area with transparent color.

To fill or stroke marked arc use fill() or stroke()

Method takes 4 parameters:

  • x - x position of circle center
  • y - y position of circle center
  • radius - radius of circle
  • height - height of rectangle
  • startAngle - starting angle [in radians]
  • endAngle - ending angle [in radians]

moveTo

ctx.moveTo(x, y);

moveTo - mark a start point of a line.

In order to draw line we need use lineTo() method to mark end point and then use stroke().

Method takes 2 parameters:

  • x - x position of point
  • y - y position of point

lineTo

ctx.lineTo(x, y);

lineTo - mark a endPoint point of a line.

In order to use draw line we need lineTo method.

Method takes 2 parameters:

  • x - x position of point
  • y - y position of point

lineWidth

ctx.lineWidth = <width>;

lineWidth - set width of line to stroke in pixels.