<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);
}
This Pen doesn't use any external CSS resources.