CGW - Banner

by Fabio Dan

HTML

<canvas id="canvas" width="1000" height="300"></canvas>

CSS

body {
  margin: 0;
}

#canvas {
  background: #333;  
}

JavaScript

// Banner constructor.
function Banner() {  
  'use strict';
  
  var canvas, ctx, canvasBg, ctxBg;
  var denseness = 10;
  var radius = 4;
  
  // Public init method.
  this.init = function(elemId, text) {

    canvas  = document.getElementById(elemId);
    ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FFFFFF';
        
    // Creating background canvas.
    canvasBg = document.createElement('canvas');
    ctxBg = canvasBg.getContext('2d');
    
    canvasBg.width = canvas.width;
    canvasBg.height = canvas.height;
    ctxBg.textBaseline = 'top';
    ctxBg.font = 'normal 200px impact';
    ctxBg.fillText(text, 0, 0);

    getCoordinates();
  };
  
  function getCoordinates() {
    
    // Getting pixel from background canvas.
    var imageData = ctxBg.getImageData(0, 0, canvasBg.width, canvasBg.height);
    
    for (var row = 0; row < canvasBg.height; row += denseness) {
      for (var col = 0; col < canvasBg.width; col += denseness) {
        var pixel = imageData.data[(((row * imageData.width) + col) * 4) - 1];      
        if (pixel === 255) {
          drawCircle(col, row);
        }
      }  
    }
  }
  
  function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
    ctx.fill();
  }
}

var myBanner = new Banner();
myBanner.init('canvas', 'CG Warmup');