Simple IPython magic for working with HTML / Javascript Canvas.
To install:
pip install git+https://github.com/innovationOUtside/ipython_magic_canvas.git
To upgrade a current installation to the latest repo version without updating dependencies:
pip install --upgrade --no-deps git+https://github.com/innovationOUtside/ipython_magic_canvas.git
To load the magic in a Jupyter notebook:
%load_ext canvas_magic
Then call as block magic: %%canvas
The magic automatically creates a canvas element with a random HTML tag id. Specify the id using the --id argument: %%canvas --id mytag or %%canvas -I mytag
Prefix canvas code with a reference to the canvas 2D context:
%%canvas -c ctx
ctx.beginPath();
ctx.fillStyle = "#F9A520";
ctx.moveTo(0, 0);
ctx.lineTo(200, 0);
ctx.lineTo(100, 200);
ctx.fill();
// triangle 2, top center
ctx.moveTo(300, 0); // pick up "pen," reposition at 300 (horiz), 0 (vert)
ctx.lineTo(300, 200); // draw straight down (from 300,0) to 200px
ctx.lineTo(500, 100); // draw up toward right (100 half of 200)
ctx.fill(); // connect and fill
Automatically generate a canvas element and 2D context and write to that:
%%canvas
beginPath();
fillStyle = "#F9A520";
moveTo(0, 0);
lineTo(200, 0);
lineTo(100, 200);
fill();
beginPath();
fillStyle = "#F00";
moveTo(300, 200);
lineTo(300, 400); // draw straight down by 200px (200 + 200)
lineTo(100, 300); // draw up toward left (100 less than 300, so left)
fill(); // connect and fill
We can also pass the script in via a (python) variable. For example, using the following script:
txt='''
ctx.beginPath(); // note usage below
// triangle 1, at left
ctx.fillStyle = "#F9A520";
ctx.moveTo(0, 0); // start at top left corner of canvas
ctx.lineTo(200, 0); // go 200px to right (x), straight line from 0 to 0
ctx.lineTo(100, 200); // go to horizontal 100 (x) and vertical 200 (y)
ctx.fill(); // connect and fill
// triangle 2, top center
ctx.moveTo(300, 0); // pick up "pen," reposition at 300 (horiz), 0 (vert)
ctx.lineTo(300, 200); // draw straight down (from 300,0) to 200px
ctx.lineTo(500, 100); // draw up toward right (100 half of 200)
ctx.fill(); // connect and fill
// triangle 3, bottom center
ctx.beginPath(); // note: w/o this, color does not work as expected
ctx.fillStyle = "#F00";
ctx.moveTo(300, 200); // pick up "pen," reposition at 300 (horiz), 200 (vert)
ctx.lineTo(300, 400); // draw straight down by 200px (200 + 200)
ctx.lineTo(100, 300); // draw up toward left (100 less than 300, so left)
ctx.fill(); // connect and fill
'''
and then pass it into the magic:
%canvas -v txt --context ctx
The --wrap switch also requires a default context element (ctx) to be referenced in the script:
%canvas -v txt --wrap
We can also pass in scripts that do not require a context t be explicitly defined - the canvas element and an associated context will be generated automatically:
txt2='''
beginPath(); // note usage below
// triangle 1, at left
fillStyle = "#F9A520";
moveTo(0, 0); // start at top left corner of canvas
lineTo(200, 0); // go 200px to right (x), straight line from 0 to 0
lineTo(100, 200); // go to horizontal 100 (x) and vertical 200 (y)
fill(); // connect and fill
// triangle 3, bottom center
beginPath(); // note: w/o this, color does not work as expected
fillStyle = "#F00";
moveTo(300, 200); // pick up "pen," reposition at 300 (horiz), 200 (vert)
lineTo(300, 400); // draw straight down by 200px (200 + 200)
lineTo(100, 300); // draw up toward left (100 less than 300, so left)
fill(); // connect and fill
'''
Pass it into the script using the -v argument as before:
%canvas -v txt2
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent