Skip to content

Instantly share code, notes, and snippets.

@JonathanDn

JonathanDn/canvas.css

Created October 16, 2019 08:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JonathanDn/7e56c6dce510b9441e287fc28a2b0c62 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JonathanDn/7e56c6dce510b9441e287fc28a2b0c62 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JonathanDn created this gist Oct 16, 2019.
    4 changes: 4 additions & 0 deletions canvas.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    body {
    margin: 0;
    overflow: hidden;
    }
    1 change: 1 addition & 0 deletions canvas.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <canvas></canvas>
    77 changes: 77 additions & 0 deletions canvas.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    // 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();