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