<canvas id="canvasOne" width="500" height="300">
@import url(https://fonts.googleapis.com/css?family=Bangers);

body {
  background: rgba(100, 145, 250, 0.3);
}
    
   
View Compiled
window.addEventListener('load', eventWindowLoaded, false);
  var Debugger = function() {};
  Debugger.log = function(message) {
    try {
      console.log(message);
    } catch (exception) {
      return;
    }
  }

 function eventWindowLoaded() {
  canvasApp();
}

function canvasApp() {
  var theCanvas = document.getElementById('canvasOne');
  var context = theCanvas.getContext('2d');
  Debugger.log('Drawing Canvas');
  
  function drawScreen() {
    context.lineWidth = 6;
    context.font = '8em/1 Bangers, sans-serif';
    context.strokeStyle = '#f36';
    context.strokeText('w3cplus',50,150);
  }
  drawScreen();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.