Skip to content

Instantly share code, notes, and snippets.

@mako34

mako34/Canvas little demo

Created April 11, 2020 02:12
Show Gist options
  • Save mako34/7ceab02daf62bd8c0a5d18d09b148edf to your computer and use it in GitHub Desktop.
Save mako34/7ceab02daf62bd8c0a5d18d09b148edf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment