Code Examples

Alternative ellipse code

A recent comment on the drawing ovals in javascript post by Maurício provided an ellipse drawing function for drawing ellipses based on the radius of the shapes greater semi-axis and its eccentricity.

Here is an interactive version of the code. Thanks Mauricio!

Text in HTML5 canvas

interactive text canvas

html5 canvas element has a robust set of methods for rendering text. This functionality is accessed by calling methods of the canvas context object.

The basic syntax is:

context.fillText("text", x, y);

Javascript code to convert light wavelength to color

In the electromagnetic spectrum illustration and light color, frequency and wavelength post, I needed to calculate color from wavelength value. I tried a few different approaches but finally settled on a modified version of some widely cited FORTRAN code for determining RGB values.

Draw an oval in html5 canvas

The JavaScript canvas element does not have a native method for drawing ovals (ellipses).

Drawing circles in a JavaScript HTML5 Canvas element

The arc() method is the native way to draw circles in a canvas element.  The method takes 6 parameters:

cxt.arc(x, y, radius, start, end, direction)

Drawing regular polygons in javascript canvas

Geometric shapes such as regular polygons are useful building blocks for drawing more complex elements within JavaScript canvas tags. The following block shows 3, 4, 5, 6, 7, 8, 9 and 10 sided regular polygons.
Subscribe to RSS - Code Examples