Tutorial
Want to start to code in Canvas2d.js? Then read these instructions.
Firstly, go to the main page to download the JS file and write this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="Canvas2d.js"></script>
<script>
// This is where we are going to do the JS code
</script>
</head>
<body>
<canvas id="my-canvas"></canvas>
</body>
</html>
Note that there is no <script type="module"> in the script tag because Canvas2d.js is not a module.
Also, we need to run our JS code on page load, so we are going to add this in the script tag:
onload = () => {
// Code
}
We can add a global variable named "canvas" that's gonna be the canvas object.
We'll initialize it in the onload event.
Canvas2d.Scene is a class for generating a scene. It has one optional parameter for the canvas that it'll be using. If not present, it'll create a new canvas.
Then, we can add text with the TextAsset class.
Here's our code so far:
var canvas;
onload = () => {
canvas = new Canvas2d.Scene(document.getElementById("my-canvas"));
var text = new Canvas2d.TextAsset("Hi!");
canvas.add(text);
}
We can also change the text position, font, color, baseline, align, and other.
text.font = "bold 50px Arial"; text.baseline = "middle"; text.align = "center"; text.color = "red"; text.x = 100; text.y = 100;
But, we forgot the canvas. Let's adjust it, too.
canvas.width = 200; canvas.height = 200; canvas.background = "black";
Now, our final step is to draw the canvas with canvas.draw().
Congrats! We've created our first program with Canvas2d.js!
The final code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="Canvas2d.js"></script>
<script>
var canvas;
onload = () => {
canvas = new Canvas2d.Scene(document.getElementById("my-canvas"));
var text = new Canvas2d.TextAsset("Hi!");
canvas.add(text);
text.font = "bold 50px Arial";
text.baseline = "middle";
text.align = "center";
text.color = "red";
text.x = 100;
text.y = 100;
canvas.width = 200;
canvas.height = 200;
canvas.background = "black";
canvas.draw();
}
</script>
</head>
<body>
<canvas id="my-canvas"></canvas>
</body>
</html>
The result:
Canvas2d.Scene
This class is used to link a canvas to draw on.
constructor (?canvas: HTMLCanvasElement)
Creates a new Canvas2d.Scene object.
canvas: The canvas that's linked. If not present, creates a new one.
width: Number
The canvas width in pixels.
height: Number
The canvas height in pixels.
assets: Array
All the assets added in the canvas. Used internally by this class.
background: String
A CSS value used for the canvas background. Default is "white".
dataURL: String
The canvas drawing into a data URL.
add (asset: Canvas2d.Asset): undefined
Adds a new asset in the canvas.
If the asset is present in another scene, it'll be removed from that one.
asset: The asset to be added.
remove (asset: Canvas2d.Asset): undefined
Removes an existing asset in the canvas.
asset: The asset to be removed.
draw (): undefined
Draws all the assets by calling their draw method.
Canvas2d.Asset
This is the parent of the asset classes, such as ImageAsset.
constructor ()
Creates a new Canvas2d.Asset object.
parent: Canvas2d.Scene
The canvas this asset is in. Defaults to null.
uuid: String
The asset UUID. Used in Canvas2d.Scene.remove.
Canvas2d.ImageAsset
Adds an image to the canvas.
Extends: Canvas2d.Asset
constructor (?image: Image, ?width: Number, ?height: Number)
Creates a new Canvas2d.ImageAsset object.
image: The image that'll be displayed. Defaults to document.createElement("img").
width: The image width. Defaults to 0.
height: The image height. Defaults to 0.
image: Image
The image DOM element. Created in the constructor.
x: Number
The image X position on the canvas.
y: Number
The image Y position on the canvas.
width: Number
The image width. Assigned value in the constructor.
height: Number
The image height. Assigned value in the constructor.
rotation: Number
The image clockwise rotation (pivot point is image center) in degrees.
posFromCenter: Boolean
If true, the X and Y will be the coordinates of the image center. Defaults to false.
draw (): undefined
Draws the image on the canvas. Called from Canvas2d.Scene.draw.
Canvas2d.TextAsset
Adds text in the canvas.
Extends: Canvas2d.Asset
constructor (text: String, ?x: Number, ?y: Number, ?font: String, ?color: String)
Creates a new Canvas2d.TextAsset object.
text: The text that will be displayed.
x: Text X position. Defaults to 0.
y: Text Y position. Defaults to 0.
font: A CSS font property used for the text font. Defaults to "15px Arial".
color: A CSS color property used for the text color. Defaults to "black".
text: String
The text to be displayed. Initialized in the constructor.
x: Number
The text X position. Initialized in the constructor.
y: Number
The text Y position. Initialized in the constructor.
font: String
The text CSS font. Initialized in the constructor.
color: String
The text CSS color. Initialized in the constructor.
align: String
The text CSS align property. Defaults to "start".
baseline: String
The text CSS baseline property. Defaults to "alphabetic".
stroke: Boolean
If true, the text will be stroked instead of filled. Defaults to false.
draw (): undefined
Draws the text on the canvas. Called from Canvas2d.Scene.draw.
Canvas2d.RectAsset
Adds a rectangle in the canvas.
Extends: Canvas2d.Asset
constructor (?x: Number, ?y: Number, ?width: Number, ?height: Number, ?color: String)
Creates a new Canvas2d.RectAsset object.
x: Rectangle X position. Defaults to 0.
y: Rectangle Y position. Defaults to 0.
width: Rectangle width. Defaults to 0.
height: Rectangle height. Defaults to 0.
color: A CSS color property used for the rectangle color. Defaults to "black".
x: Number
The rectangle X position. Initialized in the constructor.
y: Number
The rectangle Y position. Initialized in the constructor.
width: Number
The rectangle width. Initialized in the constructor.
height: Number
The rectangle height. Initialized in the constructor.
color: String
The rectangle CSS color. Initialized in the constructor.
stroke: Boolean
If true, the rectangle will be stroked instead of filled. Defaults to false.
rotation: Number
The rectangle clockwise rotation (pivot point is image center) in degrees.
posFromCenter: Boolean
If true, the X and Y will be the coordinates of the rectangle center. Defaults to false.
draw (): undefined
Draws the rectangle on the canvas. Called from Canvas2d.Scene.draw.
Canvas2d.Parallax
Adds a parallax effect image in the canvas stretching through the whole one.
Extends: Canvas2d.Asset
constructor (?image: Image, ?resizeBy: String)
Creates a new Canvas2d.Parallax object.
image: The repeating image. Defaults to document.createElement("img").
resizeBy: How to resize the image. Enumerator, defaults to "none". See more here.
x: Number
The parallax X movement. Defaults to 0.
y: Number
The parallax Y movement. Defaults to 0.
image: Image
The parralax repeating image. Initialized in the constructor.
resizeBy: String
How to resize the image. Initialized in the constructor.
It can be one of these three values:"width": Resize the image to be the same width as the canvas width."height": Resize the image to be the same height as the canvas height."none": Don't resize the image, keep its original form. Useful when making tiled images.
draw (): undefined
Draws the parallax on the canvas. Called from Canvas2d.Scene.draw.