• KIAS (beta)
• KVS Kasper Video System
  • KVS Splitter and Splicer
  • KVS Mixer
  • KVS Checkbox
  • KVS Oscillator (KAZZ NOIZER)
• Web Instruments
  • Grid-synth
  • Teleidoscope
  • Motion sketch
  • Morphing Dots
  • Alternate World
  • Arabesque
  • Spirograph
  • Crazy Grid
  • Raster Scan
  • Moving Dots
  • Video Weaver
• Etudes
  • Loop 1: Spider
  • Loop 2: Star weaver
  • Loop 3: Clover
  • Loop 4: Star-crossed
  • Loop 5: Spiral
  • Loop 6: Worm
  • Loop 7: Tail
  • Loop 8: Pentagram
  • Loop 9: Triangular explosion
  • Loop 10: Ocean
  • Loop 11: Islamic Pattern (Keith Critchlow)
  • Loop 12: Spinning grid
  • Loop 13: Rug
  • Loop 14: Harp
  • Loop 15: Coil
• DIY Scripts
  • Simple Animation
  • Simple object
  • Image Processing: Tinting
  • Acceleration script
  • Image processing: Invert
  • Variable Modulator
  • Oscillators (wave functions)
  • Detect key press
  • Track Angle
  • Smart drawImg function
  • hsl2hex
• Essays
  • Filmmaskinen som Metode
  • Filmmaskinens Cinematografiske Tænkning
  • Skeletter i Maskinen (i 16:9)
  • "The New MacBook" - Aktivering og kontemplering i det filmiske interface
  • Den Sprængte Strimmel - Konstellationernes spil i Stan Brakhages "Mothlight"
  • Alkymisk Processuering i Len Lyes "Free Radicals"
  • Tegn-dynamik og filmisk tænkning i Brakhages "Dog Star Man"
• About

drawImg = Smart drawImage prototype function

The Golden Lines

CanvasRenderingContext2D.prototype.drawImg = function(img, x, y, width, height, deg, flip, flop, center) { 
	var context = this;

	context.save();

	if(typeof width === "undefined") width = img.width;
	if(typeof height === "undefined") height = img.height;
	if(typeof center === "undefined") center = true;

	// Set rotation point to center of image, instead of top/left
	if(center) {
		x -= width/2;
		y -= height/2;
	}

	// Set the origin to the center of the image
	context.translate(x + width/2, y + height/2);

	// Flip/flop the canvas
	if(flip) flipScale = -1; else flipScale = 1;
	if(flop) flopScale = -1; else flopScale = 1;
	context.scale(flipScale, flopScale);

	// Rotate the canvas around the origin
	var rad = 2 * Math.PI + deg * Math.PI / 180;    
	context.rotate(rad);

	// Draw the image    
	context.drawImage(img, -width/2, -height/2, width, height);

	context.restore();
}

Examples of use

var orgCan = document.getElementById("org");
var org = orgCan.getContext("2d");

org.textAlign="center";
org.textBaseline = 'middle';
org.font="100px Verdana";
org.fillText("R",50,55);

var myCanvas1 = document.getElementById("myCanvas1");
var ctx1 = myCanvas1.getContext("2d");

for(var x = 0; x < 4; x++){
	ctx1.drawImg(orgCan, 50+x*100, 50, 100, 100, x*90, false, false);

	// HORIZONTAL FLOP
	ctx1.drawImg(orgCan, 50+x*100, 150, 100, 100, x*90, false, true);
}

var myCanvas2 = document.getElementById("myCanvas2");
var ctx2 = myCanvas2.getContext("2d");

for(var y = 0; y < 4; y++){
	ctx2.drawImg(orgCan, 50, y*100+50, 100, 100, y*90, false, false);

	// VERTICAL FLIP
	ctx2.drawImg(orgCan, 150, y*100+50, 100, 100, y*90, true, false);
}

Ways to send the img value

• Use canvas element:
  var mycanvas = document.getElementById("canvas");
  ctx.drawImg(mycanvas, 0, 0, 100, 100);
• Use img element:
  var myimg = document.getElementById("img");
  ctx.drawImg(myimg, 0, 0, 100, 100);
• Use img object:
  var myimg = document.getElementById("img");
  ctx.drawImg(myimg, 0, 0, 100, 100);