<h1><strong>HTML5 Canvas</strong> - <span>PIXI.JS </span></h1>
$green: #88ce02;
$dark: #262626;

body {
  background-color: #ebebeb;
}
h1 {
  font-size: 16px;
  width: 300px;
  color: #838484;
  font-weight: 300;
  text-align: center;
  span {
    color: #E91E63;
  }
  strong {
    color: #fff;
  }
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 10px 20px;
  z-index: 100;
  background-color: $dark;
  border: 1px solid transparentize(white, .7);
}
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px #232323 solid;
}
View Compiled
var renderer, stage, circle, line, allShapes;

// You can use either `new PIXI.WebGLRenderer`, `new PIXI.CanvasRenderer`, or `PIXI.autoDetectRenderer`
// which will try to choose the best renderer for the environment you are in.
renderer = new PIXI.WebGLRenderer(300, 300);

// The renderer will create a canvas element for you that you can then insert into the DOM.
document.body.appendChild(renderer.view);

// You need to create a root container that will hold the scene you want to draw.
stage = new PIXI.Container();

drawCircle();
drawLine();

function drawCircle(){
  
  // Create a circle
  circle = new PIXI.Graphics();
  
  // define outline = stroke
  circle.lineStyle(10, 0xE91E63, 1);
  
  // draw circle (x, y, radius)
  circle.drawCircle(renderer.width / 2,renderer.height / 2,100);
  
  allShapes = new PIXI.Container();
  allShapes.position.y = 0;
  allShapes.position.x = 0;

  // Add element to the stage
  allShapes.addChild(circle);
  
  stage.addChild(allShapes);
  
  render();
}

function drawLine(){
  
  // Create a line
  line = new PIXI.Graphics();

  // Define line style = stroke
  // width, color, alpha
  line.lineStyle(10, 0xE91E63, 1);

  // Define line position - this aligns the top left corner of an element
  line.position.x = renderer.width / 2;
  line.position.y = renderer.height / 2;

  // Draw line
  line.moveTo(0,0);
  line.lineTo(95, 0);
  
  // Add element to the stage
  allShapes.addChild(line);
  
  stage.addChild(allShapes);
  
  render();
  
}

// add stage to the canvas
function render(){

  requestAnimationFrame(render);
  
  renderer.render(stage);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js