How to go from sketch to HTML5 canvas

2011/02/04 Tags: development

0. Create sketch using paper and pen. (Pigma Micron 01 ink on 100 gsm paper in this case)
1. Take photo of sketch. (Using a Google Nexus S phone in this case)
2. Crop image, size it, and save it as a bitmap. (Paint.NET in this case)
3. Convert BMP format to SVG using potrace

@echo off
rem Batch file for automating SVG from BMP

if not "%~x1"==".bmp" goto :MustBeBitmap

mkbitmap -f 2 -s 1 -t 0.48 -o "%~n1.pnm" %1

potrace --svg -o "%~n1.svg" "%~n1.pnm"

goto :eof

:MustBeBitmap
echo You must provide a bitmap file (.bmp)
4. Create web page that loads SVG content and process it with svg2canvas.js. (As for this page.)