Beginning Digital Arts: February 2014

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);

// inner circle
var circ1X = 60;
var circ1Y = 30;
var circ1Radius = 100;

// outer circle
var circ2X = 70;
var circ2Y = 25;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgb(240,244,0)");

// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgb(120,80,255)");

// outer color
grd.addColorStop(1, "rgb(125,50,80)");

context.fillStyle = grd;
context.fill();

context.beginPath();
context.rect(300,300,300,300);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 300;
context.strokeStyle = 'blue';
context.stroke();

context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(50,100); // move to starting coordinates
context.lineTo(125,200); // draw line to following point coordinates
context.lineTo(80,100); // draw line to following point coordinates
context.strokeStyle = 'red'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();

// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;

context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();

var startX = 0;
var startY = canvas.height/2;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(600, 700);
context.quadraticCurveTo(canvas.width*1/5, canvas.height/5, 500, 540);
context.quadraticCurveTo(canvas.width*4/5, canvas.height/5, 100, 500);
context.closePath();
context.fillStyle = "rgb(100,255,150)";
context.fill();

var centerX = 700;
var centerY = 150;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

var centerX = 375;
var centerY = 200;
var radius = 70;

var startAngle = 1.1 * Math.PI;
var endAngle = 1.7 * Math.PI;

context.beginPath();
context.arc(centerX, centerY, radius, 1.1, .8 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Beginning Digital Arts

Wednesday, February 26, 2014

Logos

Wednesday, February 12, 2014

Calligram

Saturday, February 1, 2014

html canvas

Blog Archive