<CANVAS> & WEBGL

//////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////// CANVAS ////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////

// var ctx = canvas.context('2d');

// Draw rect

ctx.fillStyle = "rgb(0, 162, 232)";

ctx.fillRect(0, 0, 125, 125);

// Set Line Style

ctx.lineWidth = 30;

ctx.lineCap = "round";     // "round", "square", "butt"

ctx.lineJoin = "round";     // "bevel", "round", "miter"

// Draw rect outline

ctx.strokeStyle = "rgb(0, 0, 0)";

ctx.strokeRect(300, 300, 145, 145);

// Draw circle

ctx.beginPath();

ctx.fillStyle = "rgb(0 ,0 ,0)";

ctx.arc(123, 93, 80, 0, 2*Math.PI, true);

ctx.fill();

  

// Draw stroke circle

ctx.beginPath();

ctx.strokeStyle = "rgb(0, 0, 0)";

ctx.arc(123, 408, 80, 0, 1.5*Math.PI, false);

ctx.stroke();

//Draw Line

ctx.moveTo(194, 104);

ctx.quadraticCurveTo(54, 104, 54, 246);

ctx.lineTo(240, 272);

ctx.closePath();

ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);

// Matrix

ctx.rotate(0.2 * Math.PI);

ctx.translate(75,100);

ctx.scale(2,2);

ctx.transform(cose, sine, -sine, cose, 0, 0);  

ctx.setTransform(1, -4, 0, 1, 0, 0);

// Define gradients

var gradient1 = ctx.createLinearGradient(0, 0, 0, 500);

gradient1.addColorStop(0, "#00ABEB");

gradient1.addColorStop(1, "white");

ctx.fillStyle = gradient1;

// Set shadow styles

ctx.shadowOffsetX = 10;  

ctx.shadowOffsetY = 10; 

ctx.shadowBlur = 10;  

ctx.shadowColor = "rgba(0, 0, 0, 1)";

// Create pattern

var image = document.getElementById("ie_small");

var pattern = ctx.createPattern(image, "repeat");

ctx.fillStyle = pattern;

//Set Text settings

ctx.textBaseline = "top";

ctx.textAlign = "left";

ctx.font = '72px "Segoe UI" bold';

ctx.strokeText("Hello World", 0, 70);

// ctx.save();

// ctx.restore();

// ctx.drawImage(image, -10, 45, 400, 400);

// ctx.drawImage(video, 0, 0, 400, 500);

// ctx.clearRect(x, y, w, h);

// var imageData = ctx.getImageData(x, y, w, h);

imageData.data;

ctx.putImageData(imageData, 100, 150);

// var dataURL = canvas.toDataURL();

// 체험해봐요! ㅋㅋ 

http://madebyevan.com/

http://www.chromeexperiments.com/

http://www.benjoffe.com/code

http://html5gallery.com/

//////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////// WebGL ////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////

// var gl = canvas.getContext("webgl");

gl.clearColor(0.1, 0.5, 0.1, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.viewport(0, canvas.height/2.0, canvas.width/2.0, canvas.height/2.0);