Search the Community

Showing results for tags 'Canvas'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 349 results

  1. Hello, I'm a completely rookie trying to render a simple line, so I have this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update, render: render }); var line; function create() { game.stage.backgroundColor = '#011052'; line = new Phaser.Line(0, 100, 800, 100); } But it's not working, I mean I can not see the line. Please advice.
  2. Hi! I'm trying to create a Phaser.Sprite using a canvas-based texture (another attempt to connect ThreeJS with Phaser, if you're interested), but I have some issues. My first attempt before doing all of this was forcing ThreeJS render into a Phaser.BitmapData, but maybe you already thinking it was a non-optimal solution (with small canvases works fine, but if you increase the resolution, the perfomance will slow down, aaaaand you're limited to take frames from only 2d-non-webgl context). Faster solutions? Yes, maybe Phaser.RenderTexture was a good idea, but I never find a way how to render a canvas into it. (Since canvas is not a PIXI.DisplayObject). So, after researching a while, I came with the idea of render the canvas more directly to the sprite, doing this ... sprite = new Phaser.Sprite(game, x, y, null); //There's a canvas named "renderHere" where stuff is rendered. sprite.setTexture(PIXI.Texture.fromCanvas(document.getElementById("renderHere"), PIXI.scaleModes.DEFAULT)); ... it works BUT it justs render the fist frame. Yes, I need to update it. I found that in some Github issues, people mentioned that I need to refresh the textures in PIXI doing this: PIXI.texturesToUpdate.push(sprite.texture); But Surprise!: PIXI.texturesToUpdate is undefined!!! . (I'm using Phaser v2.4.6 with Pixi.js v2.2.9 if that's a clue). I'm thinking it is a issue about PIXI versions and such things, but I don't know really. So... Any ideas where texturesToUpdate was? O there's another workaround to refresh the texture? Or there's a direct way to render canvases in RenderTextures? Or maybe I need to quit programming and be a night exotic dancer? Thanks in advance
  3. Looking for a talented HTML 5 Games Developer, based in London. Must have: Experience in HTML5 games development Be well versed in OOP practices and design patterns Knowledge of the latest libraries and frameworks Even better if: Experience with CocoonJS or PhoneGap Experience with WebGL An open minded, keen candidate is essential, someone who is positive and self-motivated, always ready to learn. If you are interested in this position, please do not hesitate in contacting me to discuss this further.
  4. HTML5 Game Developer Im looking for a talented HTML5 Game Developer to work with our fantastic client. You will be working in a very young, vibrant and fun environment on a variety of cross-platform projects and see them from concept to delivery and beyond. Based in London, we can assist in a relocation if necessary Key Requirements for the role: Experience in HTML5 games development using DOM and canvas Passionate about games, with an understanding of game-play mechanics Well versed in OOP Practices and design patterns Knowledge of the latest libraries and frameworks Experience with using third party plugins and code and knowing when to use them Positive and self-motivated Open-minded and keen to learn Other desirable skills: Experience with CocoonJS or PhoneGap Experience with WebGL Experience with Flash, Unity or C++ Experience in general digital media asset production If you want to discuss this role further, Dont hesitate to give me a ring as soon as possible. Nixi Jhakra DDI: 0044 (0) 203 056 5960 EMAIL: N.JHAKRA@JEFFERSONWOLFE.COM Job Type: Full-time Salary: £70,000.00 /year Required education: Diploma/Certificate
  5. Hi there I'd like to know if there is a builtin way to draw to a canvas "loopingly" - I'm sorry that I cannot describe the term better, so I will describe it with an image. I'd like to have the following behavior: If I do a canvas.fillRect, everything that intersects with the canvas is filled normally; but everything that if "off canvas" will be translated to the opposite side. This effectively means, if I fill a rect that has a right "off canvas" part, this part will be drawn to the left side instead. This, of course, should work for every viable combination of sides, e.g. right bottom. While it should'nt be to hard to implement this behavior on my own - I could just cut the rects apart and make multiple fillRect calls - I'd like to know if there is a way to tell the canvas to do it naturally for the parts that are "off canvas". This is not just about rects, but about images, circles, ... If you look at the picture, the 3rd picture would mean that, if I implemented it on my own by cutting the rect into regions, I would have to perform 4 fillRect calls instead of one. And if it was an image, there would be 4 drawImage calls instead of one (also clearRect calls since I'm working with opacity). Thanks in advance for anyone helping me PS: I just wanted to ask you guys before I attempted to "have it my way" - it may also be the case that I'm suffering from premature optimization
  6. The simple ball based game, The task is to throw the ball into the empty glass kept randomly on floor. The only condition is to throw the ball with minimum one bounce on the floor. The player will get 10 turns in one round. Just try to score maximum. We are looking for buyers to buy/license the game. Also Bloggers/publishers may embed the code into the their website/blog to entertain the visitors. Just copy and paste the code below on the landing page. check out the game visit: For publishers/bloggers may copy the below code into their sites. Code copy and paste anywhere in your website: <a href='' target='frame'> <img src='play.png' alt='bounce-it' title='game link' /> </a> use image as play.png for
  7. Hi there, I'm using pixi 3.0.3, and I'm creating a mask using a line Copying that code in the examples page runs great in every browser supporting webGL. The expected result is shown in the followingimage But if I force the renderer to canvas (or disabling webGL in the browser), the result is the one seen in the attached image Line mask pixi 3.0.3 canvas. The mask isn't shown. Can anyone point me out if this is a bug of pixi? Thank you PS: I'd prefer not moving the mask to a polygon, since the mask evolves with the time and will make the geometry too complex.
  8. For a class I had to make an AI for a chess variant called apocalypse. When I looked online, there was no good computer versions of the game, so I decided to make one! Apocalypse is a lot shorter than chess and pretty fun to play. This version of the game features: Online multiplayer matchmaking! Private online games with invite links A clean user interface Check it out here: Source for the online functionality: on my github You might have to find a friend to play it with (or yourself) because not many people will be looking for a game. However if you click find game I will be hanging out in a game to vs someone. If there is interest I would be happy to release the complete source. Have fun and feedback is greatly appreciated
  9. Hello! I am currently developing a game called Improbable Game. It is a platformer with improbable difficulty. It is, or so I have heard from the people who have tested it, frustratingly fun and addictive. I am looking for suggestions and feedback. Thank you! Link:
  10. Ok guys, I know this is not strictly about BabylonJS, but I hope that some of you already faced this issue and have an answer. My HTML skills are very close to...nothing, but I spent a good amount of time searching, trying before asking for help. All I want to do is using Bootstrap to create an header and footer, and I want my canvas to take the WHOLE space available between these header & footer. Is there really no way to get out of this without some JavaScript code? What is the best way to go ? I've made a fiddle for you to understand clearly what I'd like to achieve. Thanks for your help.
  11. hello ... I am trying to take a 'snapshot' of a babylon3d scene ... in other words: I am trying to clone a babylonjs canvas when a user presses a button, and then append the new <canvas> to the <body> .. Sometimes it works, but other times it does not. However, if I use a simple canvas (ie. by using fillRect), the cloning/appending always works as expected. I have set up a test on plunker to demonstrate my problem:plunker demo ... press the button over and over again to see how sporadic it behaves when there is a babylon scene. NOTE: You can toggle between the plain canvas and the babylon canvas from within the _jquery(document).ready(...) handler . thanks, Shannon
  12. Hi. everyone.. i wanna talk about PIXI.Text. PIXI.Text is very useful to create game or something.. but it seem not to consider memory first. it create canvas every time when PIXI.Text created second. PIXI.Text call updateTexture when set text like 'power.text = "super power"'; is there some problems if canvas has only one..? thx..
  13. hi, my problem is that i'm not able to use canvas as texture for my sprite. i tried to write the following code, someone can help me telling what i wrong? the code: <body> <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script> <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script> <script> var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700), MainRenderer = new PIXI.autoDetectRenderer(1355, 700), LightStage = new PIXI.Container(), MainStage = new PIXI.Stage(0x000000), lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4) PIXI.loader .add('bg','maschera.png') .add('bg_normal','maschera_n.png') .add('block_diffuse', 'developer_2.png') .add('block_normal', 'developer_normal.png') .load(function (loader, res) { var bg = new PIXI.Sprite(; var block = new PIXI.Sprite(res.block_diffuse.texture); bg.normalTexture = res.bg_normal.texture; block.normalTexture = res.block_normal.texture; block.position.set(100,70); LightStage.addChild(bg); LightStage.addChild(block); var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7); ambientLight.position.set(100,100); LightStage.addChild(ambientLight); LightStage.addChild(lightOnDeveloper); LightRenderer.view.addEventListener('mousemove', function (e) { var rect =; lightOnDeveloper.position.x = e.clientX - rect.left; lightOnDeveloper.position.y = e.clientY -; }); animate(); }); function animate() { requestAnimationFrame(animate); LightRenderer.render(LightStage); } document.body.appendChild(MainRenderer.view); var canvas = LightRenderer.view; var LightStageBaseTexture = new PIXI.BaseTexture.fromCanvas(canvas,PIXI.SCALE_MODES.LINEAR); var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);var spriteLightStage = new PIXI.Sprite.(LightStageTexture);MainStage.addChild(LightStageTexture);// other code to add sprite to MainStageanimateMainStage();function animateMainStage() { requestAnimationFrame(animateMainStage);MainRenderer.render(MainStage);} </script> </body>i would like to know why the canvas don't display and why it isn't update. thanks in advance!
  14. Hello. I'm new with HTML5 Canvas. Currently I'm making an idle game which there is a number that always increasing (like a score). If I make a text in canvas with fillText, what code I should write to change the value of it every x time? In normal javascript, I can do something like this: But i'm very confused to do same thing in HTML5 Canvas. Anyone have solution? Thanks for your reply.
  15. Hey all, When using a blendmode on a particle the blendmode will get applied to everything on the canvas, player sprites , tile map etc. is this the expected behavior? i want to have it applied only for the particle image someone knows how to do this?
  16. I'm trying to find a way to capture the canvas and save it on the device (any device - mobile and desktop). Right now I'm having difficulty with the first part (didn't get to the second one yet...) I'm trying the blob function but all I get is a black Square - even when the background on the canvas is gray or yellow... var canvas = document.getElementById("myCanvas");var imagData; var dataURL = canvas.toDataURL( "image/png" );var data = atob( dataURL.substring( "data:image/png;base64,".length ) ), asArray = new Uint8Array(data.length); for( var i = 0, len = data.length; i < len; ++i ) { asArray[i] = data.charCodeAt(i); }var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );var img = document.createElement("img");img.src = (window.webkitURL || window.URL).createObjectURL( blob );document.body.appendChild(img);How do I capture the canvas with all of the graphics? And then, How do I save it on the device? Thanks in advance
  17. Hi, I'm the director of Hinge ( and we're looking for a developer who's skilled in Canvas and/or CreateJS to work with us on an on-going project. The project is not an HTML5 game but requires skills of those familiar with the tech. The project is under NDA, so I'm unable to share many details in public, however I can say that it's already established and is used by internationally and known organisations. The goal of the project is to convert an app that currently works on Flash into Canvas. Most of the project is built and we're looking for help on specific features that aren't possible with CreateJS but are possible with Canvas. We're looking for someone to start within the next few weeks, pending the client's approval. If you're interested, please do leave a reply so we can arrange a time to talk. Thank you for your time, Pete
  18. Dragyn3652

    Pong help

    Hello - I am in need of help figuring out how to stop the paddles from leaving the screen. I am a beginner so my code is not the cleanest, but i would appreciate any help that is out there i uploaded the code to thanks
  19. Hi everyone! I've created a simple game with Phaser and, like other people, when I execute it in browsers it works very well, but when I wrap it with PhoneGap, Ludei or XDK (to be executed as an Android App) some of the states of the game are sometimes distorted. Here you can see an example of what is happening: Valid example: example: have developed the game twice, one with Phaser v2.0.1 and Phaser v1.1.5 and I obtained the same results in both cases. In addition, I have into account memory issues, adding to each state a "shutdown" method to destroy properly all the sprite I don't need any more. Also I take care of destroying timers when I don't need them. And finally, I have to used CANVAS rendering because with my little experience has been impossible to make it work using WEBGL with PhoneGap, Ludei or XDK. I've try also CrossWalk but it's quite difficult for me. Has anyone else had a similar problem? BTW the game is already available on Google Play and it was wraped with PhoneGap, since it has lot of cordova plugins, and the obtained performance was quite similar in comparison with Ludei or XDK: Thank you very much in advance.
  20. Hi there guys, usually I make my games using Phaser and on top of that I have an html layer with a form to save the leaderboards. That´s pretty easy to use and as I use always the same, super fast Anyway, now that I´m targeting mobile games, I´m using and everything is fine when I don´t need too much CPU power, then I have to use cocoon´s Canvas+ and then I´m not allowed to use my loved html form, so my question is this one, how do you handle input text in a canvas? I would like to do it properly to be able to use Canvas+ in some cases but I tried a couple of things and I´m not really happy with them... do you guys have some experience/tip/advice about this? Thanks.
  21. I'm new in Create.js and I'm trying to make countdown progress bar. I have this simple code: var stage = new createjs.Stage("timerCanvas"); stage.canvas.width = document.getElementById('timerProgress').offsetWidth; stage.canvas.height = document.getElementById('timerProgress').offsetHeight; var square = new createjs.Shape();'red').drawRect(0, 0, stage.canvas.width, stage.canvas.height); stage.addChild(square); createjs.Tween.get(square, { loop: false }).to({ scaleX: 0 }, 90000); createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener("tick", stage); My canvas width is 1920px and height 5px. My CPU average load is 20%, when this script runs... I think it is high load, for such simple script. Am I right? If I am, What I'm doing wrong? How can I make optimization?
  22. Hello everyone, i am new here, and would like to ask my first question! I have made a 2d canvas game using mainly CreateJS, and GSAP. For various reasons, i would like to be use Firefox as a browser, but i have had some performance issues that couldn't surpass. So i decided to check a webgl based rendering library such as pixiJS. I have made a quick test page to see if i could get smooth tweening using webgl rendering vs canvas based rendering. I would expect better framerates using webgl, but the truth is that i get lower framerates and really jerky motion. All the articles and examples i've read about the past couple of days were saying the exact opposite. So what am i really missing? Is it Firefox's problem? Is it that i use GSAP for tweening? Is my example code missing anything essential? You could check my quick demo here : And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links : Using canvas : webgl : Actually the above runs quite smoothly using canvas on Firefox...:-S Any insight would be great.Thanks in advance!
  23. I wanted to share Croissant the Pizza Cat, a 2D runner I made using Webpack, ES6, and canvas. It's deployed to S3. Link: Source: Thank you!
  24. Hi, Do you have any plan to implement the drop shadow filter also in canvas 2D? Thanks
  25. Hi and hello there fellas, I'd like to request your help in solving a strange Canvas bug. First of all I'd like to state that I've already released an Android/iOS game using Pixi.js (and Cocoon.js) so I do have some experience in Pixi.js stuff and I'm at least not a complete rookie. I've just recently updated my current work-in-progress project from Pixi 2.x to 3.x, which took a few hours because like half the api was deprecated. But thankfully those guys at Pixi made a deprecation.js file which made the changes a lot easier. After updating all parts of my project I have come to a state where it works just like it used to - well, in WebGLRenderer at least. As soon as I switch to CanvasRenderer (which is a must for me because of performance reasons) all hell breaks loose and images just disposition themselves randomly without any consistency or reason. I'm attaching 2 images, one from a WebGLRenderer and one from a CanvasRenderer standpoint. (It is important to note that this project worked flawlessly in both renderers back in 2.x.) So basically, what happens is... I have no idea. What is happening? In the webgl screenshot you can see that the images are positioned correctly. But in the canvas one, Some of the images are not displayed in the correct position even though their position.x/y or scale.x/y or whatever attributes have obviously not changed at all. Which makes this even more inconsistent is that I have at least 4-5 screens in my game (each being a different DisplayObjectContainer, now Container) and each screen's container seems to render a different amount of images correctly and/or wrong. I've looked all over my assets' attributes to see what changed but considering that the WebGLRenderer works perfectly and both renderers also worked perfectly in Pixi 2.x I can only assume that there is something wrong with the new CanvasRenderer. Can anyone with some insight on this or someone famous(!) like Xerver or GoodBoyDigital help me out with this? [] I'd be really grateful!