Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Just my notes on the similarities and differences between common graphics APIs
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md

README.md

Basic Graphics Techniques across APIs

New image

Open image

Save image

Rect

Draw a green rectangle 32 x 32 at 200,300

HTML/CSS

<div style="width: 32px; height: 32px; position:absolute; 
left: 200px; top: 300px; background-color: green;"></div>

SVG

<rect width="32px" height="32px" x="200px" y="300px" fill="green" />

Canvas

// assumes we have a context
ctx.fillStyle = 'green';
ctx.fillRect(200,300,32,32);

NodeBox

fill(0,1.0, 0);
rect(200,300,32,32);

Python Image Library (PIL)

draw = ImageDraw(im)
draw.rectangle([(200,300),(232,332)],{fill: 'green'})

ImageMagick

Note, for this example, we first create a 500x500 image in memory and fill it with the color skyblue, then we draw the rect, then we save it to the file draw_rect.gif. The middle line is the goal of this exercise.

convert -size 500x500 xc:skyblue \
-fill green -draw "rectangle 200,300 32,32" \
draw_rect.gif

Processing

fill(0,255,0);
rect(200,300,32,32);

Raphael

paper.rect(200,300,32,32).attr('fill', 'green');

Cocoa

Circle

Draw a red circle centered at 450,250 with a radius of 25

Something went wrong with that request. Please try again.