Tag Archives: graphics

Exploring the SVG Vector Image File Format in JavaScript

The JavaScript program below accepts a vector-based “path” in JSON format and converts that path to the SVG format. The output can then be viewed in a program that understands the SVG format, such as most modern web browsers. The … Continue reading

Posted in Uncategorized | Tagged , , , , , , | Leave a comment

Drawing Ellipses (Ovals) to an HTML5 Canvas with JavaScript

The JavaScript code below, when run, prompts the user to input information about an ellipse (oval), and then draws that ellipse to the screen. To see it in action, copy it into an .html file and open that file in … Continue reading

Posted in Uncategorized | Tagged , , , , | Leave a comment

A Flood-Fill Implementation in JavaScript

Below is a simple implementation of a floodfill algorithm in JavaScript. When run, the program will draw a green background on a canvas, render the word “FLOOD” over it in orange, and then flood-fill the background with cyan, leaving the … Continue reading

Posted in Uncategorized | Tagged , , , | Leave a comment

Comparing Images in JavaScript

The JavaScript code below, when run, prompts the user to specify two image files and click a button to calculate the difference in intensity of their respective pixels. It is intended only as a simple early experiment in the field … Continue reading

Posted in Uncategorized | Tagged , , , | Leave a comment

Exploring the PNG Image File Format with a PNG Viewer in JavaScript

The JavaScript program below, when run, prompts the user to upload a PNG file and displays that image. To see the code in action, copy it into an .html file and open that file in a web browser that runs … Continue reading

Posted in Uncategorized | Tagged , , , , , | Leave a comment

Rendering to Texture with WebGL

The JavaScript program below, when run, will display a simple three-dimensional scene rendered with WebGL. It is nearly identical to a program from a previous post, except that this version demonstrates how to render a scene to a texture, rather … Continue reading

Posted in Uncategorized | Tagged , , , , , , , | Leave a comment

A Rudimentary Mesh Editor in JavaScript

The code below implements a rudimentary editor for three-dimensional forms called “meshes”. To see it in action, copy it into an .html file and open that file in a web browser that runs JavaScript. Or, for an online version, visit … Continue reading

Posted in Uncategorized | Tagged , , , , | Leave a comment