DIGITAL ARTS BLOG: May 2012

context.beginPath();
    // context.rect(x, y, width, height);
    context.rect(0, 0, 800, 600);
    context.lineWidth = 3;
    context.lineCap = "round"; // "square" "round" "butt"
    context.closePath();
    context.fillStyle = "rgb(0,230,255)";
    context.fill();
    // context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
    context.stroke();

context.beginPath();
    // context.rect(x, y, width, height);
    context.rect(0, 350, 800, 350);
    context.closePath();
    context.lineWidth = 3;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(0,255,0)";
    context.fill();
    // context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
    context.stroke();

    context.beginPath();
    // context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
    context.arc(40, 40, 80, 0, Math.PI*2, false);
    context.closePath();
    context.lineWidth = 3;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(255,255,0)";
    context.fill();
    // context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
    context.stroke();

// context.beginPath();

var startX = 30;
var startY = 130;
var endX = 20;
var endY = 200;

context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();

// context.beginPath();

var startX = 80;
var startY = 120;
var endX = 110;
var endY = 180;

// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();

// context.beginPath();

var startX = 120;
var startY = 95;
var endX = 190;
var endY = 145;

// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();

// context.beginPath();

var startX = 135;
var startY = 60;
var endX = 210;
var endY = 70;

// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();

// context.beginPath();

var startX = 130;
var startY = 20;
var endX = 200;
var endY = 5;

context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS

context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();

// ROAD

var start1X = 400;
var start1Y = 350;
var end1X = 150;
var end1Y = 600;
var start2X = 400;
var start2Y = 350;
var end2X = 750;
var end2Y = 600;
var start3X = 150;
var start3Y = 600;
var end3X = 750;
var end3Y = 600;

context.beginPath();
context.moveTo(start1X, start1Y); // STARTING COORDS
context.lineTo(end1X, end1Y); // ENDING COORDS
context.lineTo(end2X, end2Y); // ENDING COORDS
context.lineTo(end3X, end3Y); // ENDING COORDS
context.closePath();

context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"

// add linear gradient
        var grd = context.createLinearGradient(start1X, start1Y, canvas.width/2, canvas.height);
        // light blue
        grd.addColorStop(0, "rgb(100,100,100)");
        // dark blue
        grd.addColorStop(1, "rgb(200,200,200)");
        context.fillStyle = grd;
        context.fill();
        context.strokeStyle = "rgb(100,100,100)";
        context.stroke();

///////// red house

context.beginPath();
    // context.rect(x, y, width, height);
    context.rect(45, 390, 140, 120);
    context.closePath();
    context.lineWidth = 3;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(200,0,0)";
    context.fill();
    // context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
    context.stroke();

////// roof

var start1X = 110
var start1Y = 335
var end1X = 35
var end1Y =390
var start2X = 110
var start2Y = 335
var end2X = 190
var end2Y = 390
var start3X = 35
var start3Y = 390
var end3X = 190
var end3Y = 390

context.beginPath();
context.moveTo(start1X, start1Y); // STARTING COORDS
context.lineTo(end1X, end1Y); // ENDING COORDS
context.lineTo(end2X, end2Y); // ENDING COORDS
context.lineTo(end3X, end3Y); // ENDING COORDS
context.closePath();

context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(0,0,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();

//////// clouds

    context.beginPath();
    context.arc( 450, 150, 30, 0, 360, false);
    context.lineWidth = 1;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(255,255,255)";
    context.fill();
    context.closePath();

    context.beginPath();
    context.arc( 500, 200, 40, 0, 360, false);
    context.lineWidth = 1;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(245,245,245)";
    context.fill();
    context.closePath();

    context.beginPath();
    context.arc( 550, 250, 60, 0, 360, false);
    context.lineWidth = 1;
    context.lineCap = "round"; // "square" "round" "butt"
    context.fillStyle = "rgb(255,255,255)";
    context.fill();
    context.closePath();

Tuesday, May 29, 2012