Framework for HTML5 Canvas oriented 2D video games


Canvas Engine


Framework to create video games in HTML5 Canvas

Get Started

Follow the steps below to start:

  1. Download the code canvasengine-X.Y.Z.all.min.js on Github or this website

  2. Add this code in your page :

     <!DOCTYPE html>
     <script src="canvasengine-X.Y.Z.all.min.js"></script>
     <canvas id="canvas_id" width="640" height="480"></canvas>
  3. Initialize the canvas in your JS file :

     var canvas = CE.defines("canvas_id").ready(function() {	

Method ready is called when the canvas is ready (DOM loaded)

Use development files

Development files allows you to improve or correct CanvasEngine. To do this, insert these two files:

    <!DOCTYPE html>
    <script src="core/engine-common.js"></script>
	<script src="canvasengine.js"></script>
	<canvas id="canvas_id" width="640" height="480"></canvas>

View other branches of CanvasEngine on Github, you'll other version under development

If you want to use features (Animation, Input, etc), add the appropriate files :

<script src="extends/Animation.js"></script>

If you develop or modify a feature, you can use the global variable Global_CE to use other features.

Example :

// In extends/your_feacture.js, function() {

Your code

Your code contains classe(s) :

Class.create("My_Class", {


The developer can use this class in his game. You can also add code like this:

var My_Class = {
	My_Class: {
		New: function) {
			return Class.New("My_Class");

it will use the namespace defined initially by the user :

var canvas = CE.defines("canvas_id").extend(My_Class).ready(function() {"MyScene");
  name: "MyScene",
  ready: function(stage) {
     var foo = canvas.My_Class.New();


Try to properly document the code for developer :

    @doc my_class
    @class Definition of "My Class"


Class.create("My_Class", {

  @doc my_class/
  @method foo ...
  @param bar {String} ...


     foo: function(bar) {





Low-level API

  • Fullscreen support (Supported platforms).
  • Multiple image file formats: DDS, JPG, PNG and TGA.
    • Define a transparent color
  • Scene Structure
    • Overlay scenes
    • Pause scene
  • Multiplayer model
  • Preloading
    • Get the percentage of loading
  • Elements Manipulation
    • Manipulation : jQuery syntaxe
    • Draw : HTML5 Canvas API syntaxe
  • Utilities
    • merge object
    • class


  • Dialog box with the outline
  • Cursor


  • Set an animation from a spritesheet
  • Frequence and animation speed
  • Sequence of multiple image
  • Creating a custom animation with multiple sequences
  • Display once, loop or temporary

Timeline (aka Tween)

  • Easy to make interpolations effects
  • 29 Effects :
    • easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, etc.
  • Loop


  • Entities model
  • Test collision with virtual grid
  • Polygon intersection and Contains Point.


  • Set maximum line width
  • Display effect
    • Line by line
    • Character by character
  • font file formats : TTF, EOT
  • external fonts
    • Google Fonts
    • Fontdeck
    • Typekit


  • Multiple sound file formats: OGG, WAV, MP3.
  • Fading effects
  • Web Audio or SoundManager2


  • Change tone screen
  • Perform a flash
  • Shake screen


Level Design

Save & Load

  • Encoding with BISON.js

Spritesheet Management


  • Access to input types: Keyboard, Mouse, Xbox360 Pad, Joysticks
  • click, dbclick, mousemove, mouseup, mousedown, mouseout, mouseover*
  • Multi-Touch with Hammer.js :
    • hold
    • tap
    • doubletap
    • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
    • swipe, swipeup, swipedown, swipeleft, swiperight
    • transform, transformstart, transformend
    • rotate
    • pinch, pinchin, pinchout
    • touch (gesture detection starts)
    • release (gesture detection ends)

Roadmap (in order)


  • Box2d
  • Synchronized multi canvas (local multiplayer)


  • Users and Groups Management for multiplayer model
  • CSS drawing

Test performance




v1.4.0 (dev)

  • Add functionality : User Interface
    • Preset
    • Button
    • Tooltip
    • Drag&Drop
    • Background
  • Add weather effects : rain(), snow() and storm()
  • Improves offset(). Possibility of using top and bottom to place events
  • Improves options in Animation class
  • Fix event mouse when canvas resized and center the canvas in full screen
  • Fix using of several parameters in to() in Timeline class
  • Fix Mouseover for child elements
  • Avoid event propagation of key pressed


  • Add element:attrChange event
  • Add of called() method in the scene
  • Improves measureText(). Returns text height
  • Improves fillText(). Ability to center the text in an element
  • Improves each(). Possible to iterate an object
  • Improves set() in Spritesheet class. tile parameter is optional
  • Improves Scene.preload() and Materials.load() with a parameter material in callback function
  • Fix change size of a DOM element
  • Fix arguments of fillRect()
  • Fix using the method of traversing if index of an element is changed
  • Fix display elements in the preload() method of the scene
  • Input.restore() and Input.memorize deleted


  • Possibility to use several times the commands for drawing - (TheOnly92)
  • Improves fillRect() and strokeRect() by adding rounded corners
  • Add multiple property in Context class
  • Add fillCircle() and strokeCircle() in Context class
  • Add cache() and uncache() in Element class
  • Add remove() and isStopped() in Animation class and add() improved
  • Marshal class compatible with Node.js
  • Add getStack() ind Marshall class and dump(), load() improved
  • Add exist() in Spritesheet class
  • Add html() and css() in Element class for DOM layer
  • Add next(), prev(), last(), first(), eq(), find(), findAttr() in Element class for traversing
  • Add support for tile image dimensions that differ from the tile layer dimensions in Tiled class (scottbw)
  • Add rotation and flip in Tiled class (TheOnly92)
  • Display objects in Tiled class
  • getLayerObject() changed in Tiled class
  • Fix getLayer() in Tiled class
  • Fix display when an object layer is present in Tiled class
  • Fix bug where variables would not properly reset in Animation class (SomeKittens)
  • Fix bug with IE if gamepad
  • Fix click event and scrolling in fullscreen
  • Fix textAlign and lineCap properties
  • Caching of sound already loaded


  • Add transition effects in scenes
  • Add loading fonts, json and videos
  • Add using Google Fonts
  • Add Using WebCam
  • multiplayer model improved
    • emit to specific scenes
    • assignEvents()
    • loadEvents() in Scene Class
    • CE.connectServer() and
    • Using Tiled and Hit classes
    • Compatible with Express 3
    • Documentation Improved
    • Tested with Node.js > 0.10.0
  • Add getImageData(), putImageData(), createImageData() and toDataURL() in Canvas class
  • Add arcTo() and isPointInPath() in Context class
  • Add opaqueImage() in Materials class
  • Add toTimer() in CanvasEngine Core
  • Add toMatrix() and rotateMatrix() in CanvasEngine Core
  • Add remove() in Window class
  • Add to Tiled Map Editor : spacing, margin and tile offset
  • Add setPropertyByCell(), passableCell() and pathfinding() in Grid class
  • Fix invertColor() in Materials class
  • Fix flip an element
  • Fix click on transparent image
  • Removes forceEvent property and adding the method forceEvent()
  • Improve imageToCanvas() in Materials class
  • Improve getBasePath() in Materials class
  • Ability to use the DOM to display the canvas


  • Add extend() in CanvasEngine Core (Doc)
  • Add soundmanager option in defines() (Doc)
  • Add ignoreLoadError option in defines() (Doc)
  • Removal addMethod() in Element class
  • Fix no recreating the sound if already created (with SoundManager2)
  • Rendering performance increased


  • Add setSize() in Canvas class (Doc)
  • Add isFullscreen() in Canvas class (Doc)
  • Add mouse position in trigger parameters (Doc)
  • Disable context menu by default (Doc)


  • Fix loop animation
  • Add patternSize property in Animation Class (Doc)


  • Fix getMousePosition (Doc)


  • Fix materials loading as {id: Number, path: String} (Doc)
  • Fix mouseover and mouseout (Doc)
  • Add mouveEvent property in Canvas class (Doc)
  • Force ready method of canvas if the DOM is already loaded (Doc)


  • Fix scene reloaded
  • Fix sounds for iOS


  • Add getBasePath method in Materials class
  • Add getFilename method in Materials class
  • Add mousedown et mouseup events
  • Add zIndex method in Scene class
  • Fix mulit-touch gestures on touchpads
  • Improve loading sounds


  • Add Text feature
  • Add Effect feature
  • Add Cursor feature in Window class
  • Add off method in Element class
  • Add scroll method in Window class
  • Add invertColor method in Materials class
  • Add forceEvent property in Element class
  • Add hasCmd method in Context class
  • Add propagationOpacity property in Element Class
  • Add mouseScroll method in Scrolling class
  • Add random method in CanvasEngine Core
  • Add freeze property in Scrolling class
  • Add mobileUserAgent method in CanvasEngine core
  • Fix event "canvas:render" when element is hidden
  • Fix clip method in Context class
  • Fix name attribute in Element class
  • Fix value 0 in Timeline class
  • Fix press method in Input class
  • Fix load method in Materials class
  • Fix animation construct in Animation class
  • Fix load sound in cache
  • Fix scrolling
  • Fix measureText method in Canvas class
  • Fix draw map in Tiled class
  • Fix testCell method in Hit class
  • Fix intersectsWith method in Polygon class
  • Fix animation loop in Animation class
  • Improve children method in Element class
  • Improve position method in Window class
  • Improve append method in Element class
  • Improve clone method in Element class
  • Improve reset method in Input class
  • Improve load and dump methods in Marshal class
  • Improve new method in CanvasEngine class
  • Improve classes in Hit class
  • Improve isPressed method in Input class
  • Merge Hammer.js in CanvasEngine for multi touch feature


  • Add testCell method in Grid class
  • Add removeCmd method in Element class
  • Add origin points in parameters in set method in SpriteSheet class
  • Changing getEntityCells method in Grid Class
  • Fix imageToCanvas method in Materials class
  • Fix frequence in Animation class
  • Fix set method in SpriteSheet class for windows
  • getPropertyByCell method in Hit class returns undefined if column or row doesn't exist


  • Add specific image param in animation
  • Add position param in animation
  • Add getStage method in Scene class
  • Add getEnabled method in Scene class
  • Add collision feature
  • Add Window feature
  • Add overlay scenes
  • Add moveArray method in CanvasEngine Object
  • Add offset method in Element Class
  • Add position method in Element Class
  • Add pack method in Element Class
  • Add unpack method in Element Class
  • Add detach method in Element Class
  • Add children method in Element Class
  • Add removeAttr method in Element Class
  • Add prepend method in Element Class
  • Add zIndex method in Element Class
  • Add zIndexBefore method in Element Class
  • Fix reload scene
  • Fix click on multi scene
  • Fix click on element witch opacity < 1
  • Improving draw performance
  • Improving documentation (markdown)



  • Move clear method (Context class -> Canvas class)
  • Change exit method in Scene Class
  • Add multi scenes feature.
  • Add togglePause method in Scene Class
  • Add pause method in Scene Class
  • Add isEnabled method in Scene Class
  • Add exitAll method in Scene Class
  • Add eventExist method in Element Class
  • Add alias for new method : New
  • Improves the performance of clicks
  • Fix Info of tile size
  • Fix "this_" in Marshal class
  • Improving documentation


  • Change addLoopListener method
  • Ignore loading music if the type is not supported
  • Add getExtension method in Materials class
  • Add remove method in Marshal class
  • Add special events defined by a namespace (methods: refresh)
  • Add moveTo, lineTo, quadraticCurveTo, bezierCurveTo in Context
  • Add addMethod method in Context Class
  • Addition to loading the canvas for CocoonJS)
  • Fix save and load (IE9+)
  • Fix reference of image loaded (for CocoonJS)
  • Fix click on element
  • Fix Gamepad (Google Chrome)
  • Fix extend Context Class
  • Fix positions of a element's children resized
  • Fix origin point of element's children
  • Improving documentation


  • Fix restart of animations (Animation Class)
  • Fix children elements opacity
  • Fix reading some element properties
  • Fix positions of a element resized
  • Add rgbToHex method in CanvasEngine object
  • Add pattern method in Spritesheet class
  • Add cropImage method in Materials class
  • Add transparentColor method in Materials class
  • Add imageToCanvas method in Materials class
  • Add getScene method in Element class
  • Add createPattern method in Canvas class
  • Add createLinearGradient method in Canvas class
  • Add createRadialGradient method in Canvas class
  • Add addColorStop method in Canvas class
  • Add measureText method in Canvas class
  • Improving performance click
  • Improving the get method in Materials class
  • Improving documentation


  • Fix animated images
  • Improving documentation


Not indicated


Not indicated


Not indicated


  • Initial Release

Examples and Demos


MIT. Free for commercial use.

  • Support multiple calls of same command.

    Support multiple calls of same command.

    Support multiple calls of the same command to allow drawing of polygons. For example:

    opened by TheOnly92 4
  • Added support for tile image dimensions that differ from tile layer dimensions

    Added support for tile image dimensions that differ from tile layer dimensions

    Added support for tilesets where the tile image height and width are different to the tile height and width specified in the Tiled layer. This occurs in "false height" tilesets.

    opened by scottbw 1
  • Tiled class with support for multiple tilesets

    Tiled class with support for multiple tilesets

    and Spritesheet class with support EaselJS array which includes registration points.

    Just some quick hack put in a demo to show how these would be nice to have. Spritesheet still needs some of the features of Animation - not sure if there is already a way to combine the two.


    opened by robwalch 1
  • Fix Tiled.js tile in tileset width issue

    Fix Tiled.js tile in tileset width issue

    There is issue with Tiled.js. Width of tile in tileset is "this.tile_image_w" rather than "this.tile_w". Because of this the "perspective_walls" example from "Tiled map editor" works not correctly.

    opened by SHTrassEr 0
  • Throw descriptive error

    Throw descriptive error

    If the coder is trying to start an animation that hasn't been created, this will throw a proper error instead of dying on if (freq >= seq.frequence) {

    opened by SomeKittens 0
Samuel Ronce
Samuel Ronce
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

logseq-plugin-media-ts 本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。 This plugin can generate timestamps for video, audio and Bilibili video, it takes

Seth Yuan 58 Jan 3, 2023
Component oriented framework with Virtual dom (fast, stable, with tooling)

Bobril Main site Changelog of npm version: Component oriented framework inspired

Boris Letocha 359 Dec 4, 2022
Generates an image from a DOM node using HTML5 canvas

DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java

Anatolii Saienko 9.1k Jan 3, 2023
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma

CreateJS 8k Dec 29, 2022
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
women who code - object oriented programming exercise

Table of contents General info Technologies Setup General info Authorizer APP Technologies Project is created with: Typescript: 4.2 Setup Requirements

null 3 Oct 1, 2022
Serialization library for data-oriented design structures in JavaScript

Data-oriented Serialization for SoA/AoA A zero-dependency serialization library for data-oriented design structures like SoA (Structure of Arrays) and

null 11 Sep 27, 2022
A complete guide for learning Object Oriented Programming Pillars, SOLID Principles and Design Patterns with TypeScript!

Object Oriented Programming Expert With TypeScript This repository is a complete guide and tutorial for the principles and techniques of object-orient

Ahmad Jafari 44 Dec 29, 2022
CloudSecWiki is a cloud security oriented knowledge base maintained by HuoCorp.

CloudSecWiki CloudSecWiki is a cloud security oriented knowledge base maintained by HuoCorp. CloudSecWiki web Local Deploy

HuoCorp 26 Dec 4, 2022
Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! ?? If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Tromgy 9 Aug 4, 2022
The purpose of this repository is practicing JavaScript Object Oriented Programming.

Portfolio I'm going to build this portfolio in order to show the future projects that I'm going to build and my skills to the employers. Built With HT

Mahdi Rezaei 15 Nov 8, 2022
Incredible drastically simplifies creation of developer video content. It offers a unified workflow to storyboard, record, collaborate and produce the video.

?? Introduction Incredible drastically simplifies creation of developer video content. It offers a unified workflow to storyboard, record, collaborate

Incredible 113 Dec 6, 2022
A simple cli-app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. Powered by pkg and yt-scissors library.

YouTube-Scissors CLI A simple CLI app that allows you to divide a YouTube video into multiple separate videos base on a video's time stamps. This proj

Gabe 23 Nov 8, 2022
ZUI is an HTML5 front UI framework.

文档语言:中文 | English 一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。 从官方网站了解更多: 。 ?? 为移动端设计,基于 Flex 的 UI 框架: MZUI。 官方 QQ 群:2群:127535859,1

EasySoft 2.6k Dec 21, 2022