cEngine.js

Welcome! cEngine.js is a small canvas-engine for javascript. This page features examples for the core engine, as well as the plugins included.

1. Simple canvas drawing

In this example, we create a new instance of cEngine.js and run one step to draw a square.

var engine = cEngine.create({
  step: function (context) {
    context.fillStyle = 'red'
    context.fillRect(10, 10, 10, 10)
  }
}).step() 	
	

2. Plugin activityTracker

This example features the activityTracker, which stops the engine when the user loses focus of the window. This plugin will restart the engine when the user focuses on the window.

var engine = cEngine.create({
  plugins: {
    activityTracker: cEngine.activityTracker.create({
      stopOnUserLeave: true
    })
  },
  autoClear: true,
  step: function(context, width, height, dt){
    context.fillStyle = 'red'
    context.fillRect(Math.random()*20, Math.random()*20, 10, 10)
  }
}).start()
	

3. Plugin fill

var engine = cEngine.create({
  autoClear: true,
  height: 512,
  plugins: {
    fill: cEngine.fill.create({
      mode: 'stretch',
      aspectRetion: true
    })
  },
  step: function(context, width, height){
    context.fillStyle = context.fillStyle === 'red' ? 'blue': 'red'
    context.fillRect(width * Math.random(), height * Math.random(), 10, 10)
  }
})

engine.start()
	

Plugin filter

Code see example page

Filter-App

Plugin frameRate

Code see example page

Plugin input

Code see example page

Plugin stats

var obj = { x: 50, y: 50 };

var engine = cEngine.create({
  autoClear: true,
  plugins: {
    stats: cEngine.stats.create(),
    filter: cEngine.filter.create({
      filters: [{
        Shader: cEngine.filter.Shader.greyscale
      }]
    })
  },
  step: function(context){
    obj.x += (Math.random() - 0.5) * 10
    obj.y += (Math.random() - 0.5) * 10
    context.fillStyle = 'red'
    context.fillRect(obj.x, obj.y, 10, 10)
  }
}).start()
	

Coded with love by Rene Müller, see more at https://renmuell.github.io/.