Canvas Experiment

Feeling Bright: Jessie Tobin 

This image above is my attempt of a lemon with a leaf. I attempted to create a minimalistic image that stood out by using a bright color scheme. I wanted to keep the image light and simplistic. Which is why my design has one main focus. In my childhood bedroom the main colors were pink, yellow, and green. I chose these colors specifically because they envoke childhood memories and make me reflect on the early years of my life. Being a student-athlete in college just about every day can be stressful, this image makes me think about how simple life was when I was younger. Even though this is super simple it took me about 8 hours to complete.

I was inspired to create an image that was simple and clean. I looked at images like the one above to inspire the way I wanted my art to look. The color is what stood out to me which is what I wanted to accomplish with my image. Using a lemon was the best choice for this image because it is easily recognizable just by its colors. When people look at it I want their direct focus to be the colors that were used. The simple shapes and bright colors should bring calmness. The curvature of the shapes helps the image to flow together. The image should make people think of warm days, cool drinks, and good memories. 

Below is the code I used to create the image:) Thank you for reading!

// lemon yellow

var x=0;

var y=0;

var width = 800

var height= 600;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 600;

context.fillStyle = '(230,230,250)';

context.strokeStyle = 'rgb(280,230,250)';

context.stroke();

//lemon white

       var centerX = canvas.width / 2.5;

        var centerY = canvas.height / 2.5;

        var radius = 200;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        //context.fillStyle = "red";

        

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

 grd.addColorStop(0, "rgb(255,255,0)");

 grd.addColorStop(1, "rgb(255,255,0)");

 context.fillStyle = grd;  

 context.fill();

                context.lineWidth = 8;

        context.strokeStyle = "yellow";

        context.stroke();

     var centerX = canvas.width / 2.5;

        var centerY = canvas.height / 2.5;

        var radius = 190;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

        //context.fillStyle = "red";

        

 var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

 grd.addColorStop(0, "rgb(255,250,250)");

 grd.addColorStop(1, "rgb(255,250,250)");

 context.fillStyle = grd;  

 context.fill();

                context.lineWidth = 8;

        context.strokeStyle = "yellow";

        context.stroke();

////pedals

var Ax = 310;

var Ay = 240;

var Bx = 310;

var By = 240;

var control1x = 80;

var control1y = 120;

var control2x = 105;

var control2y = 330;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 300;

var Ay = 215;

var Bx = 300;

var By = 215;

var control1x = 180;

var control1y = 5;

var control2x = 120;

var control2y = 180;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 320;

var Ay = 210;

var Bx = 320;

var By = 210;

var control1x = 405;

var control1y = -40;

var control2x = 210;

var control2y = 90;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 340;

var Ay = 220;

var Bx = 340;

var By = 220;

var control1x = 545;

var control1y = 90;

var control2x = 376;

var control2y = 40;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 310;

var Ay = 265;

var Bx = 310;

var By = 265;

var control1x = 115;

var control1y = 280;

var control2x = 178;

var control2y = 485;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 333;

var Ay = 244;

var Bx = 333;

var By = 244;

var control1x = 600;

var control1y = 305;

var control2x = 485;

var control2y = 130;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 330;

var Ay = 265;

var Bx = 330;

var By = 265;

var control1x = 530;

var control1y = 500;

var control2x = 460;

var control2y = 240;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

var Ax = 320;

var Ay = 275;

var Bx = 320;

var By = 275;

var control1x = 235;

var control1y = 420;

var control2x = 420;

var control2y = 500;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 6;

        // line color

        context.strokeStyle = 'rgb(260, 210, 0)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgb(255, 230, 0)';

        context.fill();

context.stroke();

///leaf

var Ax = 595;

var Ay = 370;

var Bx = 590;

var By = 370;

var control1x = 105;

var control1y = 360;

var control2x = 515;

var control2y = 590;

        context.beginPath();

        context.moveTo(Ax,Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.lineWidth = 12;

        // line color

        context.strokeStyle = 'rgb(141, 208, 120)';

        context.lineCap = 'butt';

        context.stroke();

        context.fillStyle   = 'rgb(130, 210, 110)';

        context.fill();