mako34/Canvas little demo

## Canvas little demo
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body data-rsssl=1>
    <canvas id="myCanvas" width="600" height="900"></canvas>

    <!-- tha script for canvas -->
    <script>

        //declare canvas
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        //fill
        context.fillStyle = "blue";
        context.fillRect(0, 0, canvas.width, canvas.height);

        // do cool things with the context
        context.font = '40pt Calibri';
        context.fillStyle = 'red';
        context.fillText('Hello World!', 150, 100);

        //LINES
        //line 1
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(578, 200);
        context.lineWidth = 5
        context.strokeStyle = '#00FF00'
        context.stroke();

        //line 2
        context.beginPath();
        context.moveTo(200,120);
        context.lineTo(300, 120);
        context.strokeStyle = '#00FFFF'
        context.lineWidth = 10
        context.lineCap = 'round'
        context.stroke();

        //CURVES
        //arc
        var x = canvas.width/2
        var y = canvas.height/2 - 150
        var radius = 50
        var startAngle = 0 * Math.PI
        var endAngle = 1 * Math.PI
        var counterClockwise = true;

        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise)
        context.strokeStyle = 'black'
        context.stroke();

        //quadratic curve
        context.beginPath()
        context.moveTo(188,250)
        context.quadraticCurveTo(320, 170, 388, 250)
        context.strokeStyle = 'white'
        context.stroke()

        //Bezier curve
        context.beginPath()
        context.moveTo(100,300)
        context.bezierCurveTo(140, 350, 388, 300, 388, 400)
        context.strokeStyle = 'red'
        context.lineWidth = 5
        context.stroke();

        //PATHS
        //path
            //line 1
        context.beginPath();
        context.moveTo(100,400);
        context.lineTo(200, 500);
        context.lineWidth = 5
        context.strokeStyle = '#00FF00'
        // context.stroke();
            //arc
        var x = canvas.width/2 - 50
        var y = canvas.height/2 +100
        var radius = 50
        var startAngle = 0 * Math.PI
        var endAngle = 1 * Math.PI
        var counterClockwise = true;

        context.arc(x, y, radius, startAngle, endAngle, counterClockwise)
        context.stroke();

        //SHAPES
        //rect
        context.beginPath()
        context.rect(350, 420, 50, 80)
        context.fillStyle = 'yellow'
        context.fill()
        context.strokeStyle = 'black'
        context.stroke()

        //circle
        var centerX = canvas.width / 2 + 160
        var centerY = canvas.height / 2;
        var radius = 40;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#003300';
        context.stroke();

        //semiCircle
        context.beginPath();
        context.arc(centerX, centerY + 100, radius, 0, Math.PI, false);
        context.fillStyle = 'green';
        context.closePath()
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#003300';
        context.stroke();

        //image
        var imageObj = new Image()
        imageObj.onload = function() {
        context.drawImage(imageObj, 69, 600, 200, 150);
        };
        imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
        //shadow
        context.shadowColor = '#999'
        context.shadowBlur = 20
        context.shadowOffSetX = 15
        context.shadowOffsetY = 15


    </script>
  </body>

    </script>
    <!-- tha script for canvas -->


  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body data-rsssl=1>
	<canvas id="myCanvas" width="600" height="900"></canvas>

	<!-- tha script for canvas -->
	<script>

	//declare canvas
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');

	//fill
	context.fillStyle = "blue";
	context.fillRect(0, 0, canvas.width, canvas.height);

	// do cool things with the context
	context.font = '40pt Calibri';
	context.fillStyle = 'red';
	context.fillText('Hello World!', 150, 100);

	//LINES
	//line 1
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(578, 200);
	context.lineWidth = 5
	context.strokeStyle = '#00FF00'
	context.stroke();

	//line 2
	context.beginPath();
	context.moveTo(200,120);
	context.lineTo(300, 120);
	context.strokeStyle = '#00FFFF'
	context.lineWidth = 10
	context.lineCap = 'round'
	context.stroke();

	//CURVES
	//arc
	var x = canvas.width/2
	var y = canvas.height/2 - 150
	var radius = 50
	var startAngle = 0 * Math.PI
	var endAngle = 1 * Math.PI
	var counterClockwise = true;

	context.beginPath();
	context.arc(x, y, radius, startAngle, endAngle, counterClockwise)
	context.strokeStyle = 'black'
	context.stroke();

	//quadratic curve
	context.beginPath()
	context.moveTo(188,250)
	context.quadraticCurveTo(320, 170, 388, 250)
	context.strokeStyle = 'white'
	context.stroke()

	//Bezier curve
	context.beginPath()
	context.moveTo(100,300)
	context.bezierCurveTo(140, 350, 388, 300, 388, 400)
	context.strokeStyle = 'red'
	context.lineWidth = 5
	context.stroke();

	//PATHS
	//path
	//line 1
	context.beginPath();
	context.moveTo(100,400);
	context.lineTo(200, 500);
	context.lineWidth = 5
	context.strokeStyle = '#00FF00'
	// context.stroke();
	//arc
	var x = canvas.width/2 - 50
	var y = canvas.height/2 +100
	var radius = 50
	var startAngle = 0 * Math.PI
	var endAngle = 1 * Math.PI
	var counterClockwise = true;

	context.arc(x, y, radius, startAngle, endAngle, counterClockwise)
	context.stroke();

	//SHAPES
	//rect
	context.beginPath()
	context.rect(350, 420, 50, 80)
	context.fillStyle = 'yellow'
	context.fill()
	context.strokeStyle = 'black'
	context.stroke()

	//circle
	var centerX = canvas.width / 2 + 160
	var centerY = canvas.height / 2;
	var radius = 40;

	context.beginPath();
	context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
	context.fillStyle = 'green';
	context.fill();
	context.lineWidth = 5;
	context.strokeStyle = '#003300';
	context.stroke();

	//semiCircle
	context.beginPath();
	context.arc(centerX, centerY + 100, radius, 0, Math.PI, false);
	context.fillStyle = 'green';
	context.closePath()
	context.fill();
	context.lineWidth = 5;
	context.strokeStyle = '#003300';
	context.stroke();

	//image
	var imageObj = new Image()
	imageObj.onload = function() {
	context.drawImage(imageObj, 69, 600, 200, 150);
	};
	imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
	//shadow
	context.shadowColor = '#999'
	context.shadowBlur = 20
	context.shadowOffSetX = 15
	context.shadowOffsetY = 15


	</script>
	</body>

	</script>
	<!-- tha script for canvas -->


	</body>
	</html>