An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
Drawing With Two.js
Advanced graphics are a big part of the web these days, but there are a couple of different renderers in the mix. You could use canvas, of course; but SVG and WebGL are also options. In this tutorial, we’ll review a relatively new drawing library, two.js, which provides one API that does the same thing with all three of those renderers. If you're ready, let's check it out!
Step 1 – Setting Up
The first step is to create a two
instance and put it on the page. The Two
contstructor takes an object with a number of parameters:
var two = new Two({ fullscreen: true });
In this case, we're using the fullscreen
option, which makes the drawing area take up the entire browser window. If we wanted our drawing area to have a specific size, we could use the width
and height
properties instead; these both take a number for a pixel value. There's also the autostart
parameter; if this is set to true, any animations will run right away when the page is loaded.
There's also the type
parameter: this decides which renderer will be used. You can choose between canvas, SVG, and WebGl. You don't just type the name, though: you use a library constant of sorts: either Two.Types.canvas
, Two.Types.svg
, or Two.Types.webgl
. Just to be clear, two.js will just default to using SVG; it doesn't do any kind of feature detection to see what the browser will support. You'll have to do that on your own (and I think that's a good idea: small tools, one thing well, and all that).
So, once we have a Two
instance, what do we do with it. First, you'll want to append it to the page. It has an appendTo
method that takes an HTML element as a paramter, so let's set this up:
<div id="main"></div><script src="./two.min.js"></script><script src="./main.js"></script>
Then, in main.js
, we start with this:
var el = document.getElementById("main"), two = new Two({ fullscreen: true });two.appendTo(el);
With all this set up, we're ready to actually draw a few shapes.
Step 2 – Drawing Basic Shapes
We'll begin with basic shapes; while we can create our own complex shapes with new Two.Polygon
, most simple shapes can be made with a few handy methods.
Let's start with circles. The makeCircle
function takes three parameters:
var circle = two.makeCircle(110, 110, 100);circle.fill = "#881111";two.update();
We’ll review from the bottom, up: the call to two.update
updates are drawing area and actually renders the content. Backing up to the circle, the first two parameters are the x and y coordinates for the center of the circle. Then, the third parameter is the radius for the circle. All the two.make...
functions return a Two.Polygon
object. As we go through this tutorial, you'll see several properties and methods that you can use on these shapes. Here's the first: fill
. As you might guess, it sets the fill color: any valid CSS will do.
The result should look like this:
Now, what about rectangles? The two.makeRectangle
method takes four parameters. Just like the circle, the first two parameters mark the x
and y
coordinates for the center of the rectangle. Then, param three is width
and param four is the height
of the rectangle.
var rect = two.makeRectangle(115, 90, 150, 100);rect.fill = "orange";rect.opacity = 0.25;rect.noStroke();two.update();
Again, we're using the fill
property. We're also using the opacity
property, which accepts a decimal value between 0 and 1; we're got quarter-opacity here. Finally, we're using the noStroke
method, which removes the stroke (border) from the rectangle. Here's what we have:
Ellipses are pretty simple, too: as you might guess, the first two parameters set the center of the ellipse. Then, we've got width and height:
var ellipse = two.makeEllipse(100, 40, 90, 30);ellipse.stroke = "#112233";ellipse.linewidth = 5;ellipse.noFill();two.update();
For new properties: we've got stroke
, which sets the color of the border; to set the width of that border, we use the linewidth
property. Then, remember noStroke
? The noFill
method is the same, except removes the fill color for our shape (without that, our shapes default to a white fill).