Canvas: Serious Business

Julien Tournay

Attention: Cette pérsentation n'est pas une pérsentation sur le graphimse

Merci de votre
compréhension

Canvas ?

<canvas id= "firstcanvas" height= "500" width= "600" ></canvas>

Rectangle Path Image Text

//get context					
var ctx = simpleshapes.getContext('2d');

//draw a rect
ctx.fillStyle = "#ff0000";
ctx.fillRect (200, 200, 100, 100);	

//draw a path
ctx.strokeStyle = "#00ff00";
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(120, 100);
ctx.bezierCurveTo(130, 60, 400, 100, 370, 400);
ctx.stroke();	
ctx.closePath();

//draw lena
var lenaImg = new Image();
lenaImg.src = 'lena.jpg';
ctx.drawImage(lenaImg, 100, 50, 400, 400);	

//write in canvas
ctx.font = "italic 24px 'Marker Felt'";
ctx.fillStyle = "#f9823F";
ctx.fillText("Hello Lena :)", 240, 35);
			

Demos!

• http://www.airtightinteractive.com/demos/processing_js/noisefield08.html
• http://www.hakim.se/experiments/html5/trail/03/
• http://playbiolab.com/

flot.js

Meet ImageData

interface ImageData {
  readonly attribute CanvasPixelArray data;
  readonly attribute unsigned long height;
  readonly attribute unsigned long width;
};

interface CanvasPixelArray {
  readonly attribute unsigned long length;
  getter octet (in unsigned long index);
  setter void (in unsigned long index, in octet value);
};

ImageData createImageData(in float sw, in float sh);

ImageData getImageData(in float sx, in float sy, in float sw, in float sh);

void putImageData(in ImageData imagedata, in float dx, in float dy);

var ctx = imagedataDemo.getContext('2d');
var lenaData = ctx.getImageData(25, 25, 400, 400);
var grayLena = ctx.createImageData(400, 400);

kaBoomBoom();

ctx.putImageData(grayLena, 450, 25);

Seam Carving for Content-Aware Image Resizing
[Ariel Shamir et al. 2007]

Got git ?

git clone https://github.com/jto/jseam