Created
October 16, 2019 08:05
-
-
Save JonathanDn/7e56c6dce510b9441e287fc28a2b0c62 to your computer and use it in GitHub Desktop.
HTML Canvas Boilerplate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
overflow: hidden; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Initial Setup | |
var canvas = document.querySelector('canvas'); | |
var c = canvas.getContext('2d'); | |
canvas.width = innerWidth; | |
canvas.height = innerHeight; | |
// Variables | |
var mouse = { | |
y: innerWidth / 2, | |
x: innerHeight / 2 | |
} | |
var color = [ | |
'#2185C5', | |
'#7ECEFD', | |
'#FFF6E5', | |
'#FF7F66' | |
] | |
// Event Listeners | |
addEventListener("mousemove", function(){ | |
mouse.x = event.clientX, | |
mouse.y = event.clientY | |
}); | |
addEventListener("resize", function() { | |
canvas.width = innerWidth, | |
canvas.height = innerHeight | |
init(); | |
}); | |
// Utility Functions | |
function randomIntFromRange(min, max) { | |
return Math.floor(Math.random() * (max - min + 1) + min); | |
} | |
function randomColor(colors) { | |
return color[Math.floor(Math.random() * colors.length)]; | |
} | |
function Object(x, y, radius, color) { | |
this.x = x; | |
this.y = y; | |
this.radius = radius; | |
this.color = color; | |
this.update = function() { | |
this.draw(); | |
} | |
this.draw = function() { | |
c.beginPath(); | |
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); | |
c.fillStyle = this.color; | |
c.fill(); | |
c.closePath(); | |
} | |
} | |
// Implementation | |
function init() { | |
} | |
// Animation Loop | |
function animate() { | |
requestAnimationFrame(animate); | |
c.clearRect(0, 0, canvas.width, canvas.height); | |
c.fillText("HTML CAVNAS BOILERPLATE", mouse.x, mouse.y); | |
} | |
init(); | |
animate(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment