let myCanvas = document.querySelector('canvas')

​

// initiating 2D context on it

let ctx = myCanvas.getContext('2d')

myCanvas.width = window.innerWidth;

myCanvas.height = window.innerHeight;

​

​

​

//colors

let bgcolor = '#e0d2b8';

    darkblue = '#004f9f'; 

    midblue = '#7fa6c7';

    pink = '#e06184';

    orange = '#f67600';

    yellow = '#fdaf00';

    coffee = '#b7885c';

    grass = '#a0b213';

    darkgrey = '#5f666b';

    lightblack = '#232839';

    red = '#c66e5a';

    lightred = '#f09589';

    white ='#ffffff';

    lightgrey ="#dbdbdb";

    lightblue ="#e4edf0";

​

function circles(marginLeft,marginRight,marginTop,marginBottom,sMin,sMax,color){

let randomX = Math.floor(Math.random() * (marginRight-marginLeft)+marginRight);

let randomY = Math.floor(Math.random() * (marginBottom-marginTop)+marginBottom);

let randomSize = Math.floor(Math.random() *(sMax-sMin)+ sMin);

​

ctx.fillStyle = color;

ctx.beginPath();

ctx.arc(randomX, randomY, randomSize, 0, 2 * Math.PI);

ctx.fill();

}

​

​

​

function straightLine(xPos,yPos,width,angle,strokeColor,strokeWeight){

ctx.strokeStyle = strokeColor;

ctx.lineWidth = strokeWeight;

ctx.save();

ctx.translate(xPos,yPos);

ctx.rotate(angle);

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(width,0);

ctx.translate(0,0);

ctx.restore();

ctx.stroke();

​

}

​

function triangle(xPos,yPos,width,height,angle,color){

let randomAngleLeft = Math.floor(Math.random() * 5+1);

let randomAngleRight = Math.floor(Math.random() * 5+1);

ctx.save();

ctx.translate(xPos,yPos);

ctx.rotate(angle);

ctx.fillStyle = color;

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(width/randomAngleLeft,height);

ctx.lineTo(-width/randomAngleRight,height);

ctx.lineTo(0,0);

ctx.closePath();

ctx.fill(); 

ctx.translate(0,0);

ctx.restore();

}

function shortCurve(xPos,yPos,angle,strokeColor,strokeWeight){

let randomCurveHeight = Math.floor(Math.random() * 30+10);

let randomCurveWidth = Math.floor(Math.random() * 40+3); 

ctx.save();

ctx.translate(xPos,yPos);

ctx.rotate(angle);

ctx.lineWidth = strokeWeight;

ctx.strokeStyle = strokeColor;

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.bezierCurveTo(randomCurveWidth,randomCurveHeight,-randomCurveWidth,randomCurveHeight*2,randomCurveHeight,randomCurveHeight*3);

ctx.stroke();

ctx.translate(0,0);

ctx.restore();

​

​

}

​

function bezierOpenRight(xPos,yPos,width,height,strokeColor,strokeWeight){

​

ctx.lineWidth = strokeWeight;

ctx.strokeStyle = strokeColor;

ctx.beginPath()

ctx.moveTo(xPos, yPos);

ctx.bezierCurveTo(xPos-width/2, yPos+height*0.2, xPos-width, yPos+height*1.5, xPos+width/2, yPos+height);

ctx.stroke()

​

}

​

function bezierOpenLeft(xPos,yPos,width,height,strokeColor,strokeWeight){

​

ctx.lineWidth = strokeWeight;

ctx.strokeStyle = strokeColor;

ctx.beginPath()

ctx.moveTo(xPos, yPos);

ctx.bezierCurveTo(xPos+width, yPos+height*0.1, xPos+width/2, yPos+height*1.2, xPos-width*0.2, yPos+height);

ctx.stroke()

}

​

​

function quadShapeLeft(xPos,yPos,color){

let randomQuadWidth = Math.floor(Math.random() * 201+10)

let randomQuadHeight = Math.floor(Math.random() * 101+10)

  ctx.fillStyle = color;

ctx.beginPath();

ctx.moveTo(xPos, yPos);

ctx.lineTo(xPos+randomQuadWidth,yPos+randomQuadHeight);

ctx.lineTo(xPos+randomQuadWidth,yPos+randomQuadHeight*2);

ctx.lineTo(xPos, yPos+randomQuadHeight*3);

ctx.closePath();

ctx.fill();

}

​

function quadShapeRight(xPos,yPos,color){

let randomQuadWidth = Math.floor(Math.random() * 201+10)

let randomQuadHeight = Math.floor(Math.random() * 101+10)

​

ctx.fillStyle = color;

ctx.beginPath();

ctx.moveTo(xPos, yPos);

ctx.lineTo(xPos-randomQuadWidth,yPos+randomQuadHeight);

ctx.lineTo(xPos-randomQuadWidth,yPos+randomQuadHeight*1.6);

ctx.lineTo(xPos, yPos+randomQuadHeight*2+30);

ctx.closePath();

ctx.fill();

}

​

function quadHorizontalRandom(xPos,yPos,angle,color){

let randomQuadWidth = Math.floor(Math.random() * 201+10)

let randomQuadHeight = Math.floor(Math.random() * 31+5)

let randomQuadNum = Math.floor(Math.random() * 12+1)

​

ctx.save();

ctx.translate(xPos,yPos);

ctx.rotate(angle);

ctx.fillStyle = color;

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(randomQuadWidth,0);

ctx.lineTo(randomQuadWidth-randomQuadNum,randomQuadHeight);

ctx.lineTo(randomQuadNum, randomQuadHeight+randomQuadNum);

ctx.closePath();

ctx.fill(); 

ctx.translate(0,0);

ctx.restore();

}

​

function quadHorizontal(xPos,yPos,width,angle,color){

let randomQuadWidth = Math.floor(Math.random() * 201)

let randomQuadHeight = Math.floor(Math.random() * 101+5)

let randomQuadNum = Math.floor(Math.random() * 50+0)

​

ctx.save();

ctx.translate(xPos,yPos);

ctx.rotate(angle);

ctx.fillStyle = color;

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(width,0);

ctx.lineTo(width+randomQuadNum,randomQuadHeight);

ctx.lineTo(0-randomQuadNum,randomQuadHeight+randomQuadNum);

ctx.closePath();

ctx.fill();

ctx.translate(0,0);

ctx.restore();

}

​

function DownloadCanvasAsImage(){

    let downloadLink = document.createElement('a');

    downloadLink.setAttribute('download', 'CanvasAsImage.png');

    let canvas = document.getElementById('canvas');

  let dataURL = canvas.toDataURL('image/png');

  let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');

    downloadLink.setAttribute('href',url);

    downloadLink.click();

}

​

​

ctx.globalCompositeOperation='destination-over';

​

function bg(color){

ctx.fillStyle = color;

ctx.fillRect(0,0,myCanvas.width, myCanvas.height);

}

​