add fillRect and fillStyle to sprites (& sprite lists, tile maps) #37

err0 opened this Issue Jan 31, 2012 · 9 comments


None yet
3 participants

err0 commented Jan 31, 2012

I was thinking it might be useful to be able to create sprites using fillRect and fillStyle as per the canvas 2D context spec, for quick colored background, blocks etc. This could have been used in example 8 instead of block.bmp

Long term creation of sprites using other drawing methods like beginPath & arc could also be cool.



ippa commented Jan 31, 2012

I don't think there's nothing stopping you from doing that right now? sprite.setImage( ) can take an image or canvas which you have loaded or dynamically created. Maybe I'm missing some finer details of your suggesion?


err0 commented Feb 1, 2012

could a canvas be used at sprite creation? Should work the same as sprite.setImage()? For example trying to alter example 12 (replacing grass.png) I am getting "Uncaught Error: INVALID_STATE_ERR: DOM Exception 11" in sprite.js line 272:

function canvasRect(width, height, style) {
   var canvas = document.createElement("canvas")
   canvas.width = this.width
   canvas.height = this.height
   var context = canvas.getContext("2d")
   context.fillStyle =;
   context.fillRect(0, 0, this.width, this.height);
   return canvas;

green_block = new canvasRect(32,32,"rgb(42,255,0)");

  /* Called once when a game state is activated. Use it for one-time setup code. */
  this.setup = function() {
    fps = document.getElementById("fps")
    blocks = new jaws.SpriteList()

    for(var i = 0; i < width; i++) {
      for(var i2 = 0; i2 < height; i2++) {
        blocks.push( new Sprite({image: green_block , x: i*32, y: i2*32}) )

ippa commented Feb 1, 2012

try "return canvas.context" instead of "return canvas" .. does it work?

It should. But we could also patch setImage to detect a canvas and do that automatically for us, should be supersimple


err0 commented Feb 1, 2012

if I do that it looks like it's getting hung up looking for and trying to create an asset:

Uncaught TypeError: Cannot read property '1' of null assets.js:66
jaws.Assets.getPostfix assets.js:66
jaws.Assets.getType assets.js:70
jaws.Assets.load assets.js:132
jaws.Sprite.setImage sprite.js:101
jaws.Sprite.set sprite.js:60
Sprite sprite.js:28
Example.setup example12.html:51
jaws.GameLoop.start game_loop.js:64
jaws.switchGameState core.js:248
assetsLoaded core.js:207
jaws.Assets.processCallbacks assets.js:217
jaws.Assets.assetLoaded assets.js:192


ippa commented Feb 1, 2012

ok, I got confused. It should be an canvas, not a context. So your first example should work. Look at example11.html ... jaws.gfx.retroScaleImage() returns a canvas. Which I one line later send into a Sprite() constructor.

kxh commented Oct 11, 2012

was it really work now?


ippa commented Oct 11, 2012

not sure what you mean kxh?

kxh commented Oct 12, 2012

I do it like this
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var result = new jaws.Sprite({
image : canvas,
x : 80,
y : 480
it can`t be this

new jaws.Sprite({
image : jaws.canvas,
x : 80,
y : 480

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment