

To change the color of the circle, you can pass in, "Fill style, yellow." Now we have a yellow circle. The style properties match the HTML Canvas drawing API. Let's change the radius by setting radius to 150. Control, enter, and now our circle is centered. Note that width and height were taken from GLCW and GLCH above. Here I'll set X to width, divided by two, and Y to height, divided by two. To override the defaults, pass in a simple JavaScript object that defines the properties you want to change. An important concept in GLC is that all objects have default properties that will be used if you don't override them. Let's add a circle by saying, "List, add circle." Hit the compile button, or press control, enter, and there's your circle. You add shapes to the render list by calling various add methods. GLC has a render list which has been assigned to the local variable list here. You can see some of those commented out and some assigned to local variables for ease of use. This gets past an instance of a GLC object that has some useful properties and methods. This template creates a non-GLC function that gets called Kick off your Animation.
Perfect gif looper code#
Code editor is pre-loaded with a basic template. To the right of that is the canvas panel, and then the properties panel.

When you download and open the program, you'll see an interface like this. You can download the program for Windows, Mac, or Linux at. GIF Loop Coder, or GLC, is an application we're creating looping animated GIFs with JavaScript and HTML5 Canvas.
