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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 346 results

  1. 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
  2. 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
  3. 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
  4. 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.
  5. 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
  6. 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:
  7. 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.
  8. 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
  9. 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..
  10. 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!
  11. 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.
  12. 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?
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 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.
  18. 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?
  19. 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!
  20. 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!
  21. Hi, Do you have any plan to implement the drop shadow filter also in canvas 2D? Thanks
  22. 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!
  23. Link : Hi everyone! I'm here to introduce my very first game, named "Saving Private Redsquare". The game: You control Redsquare, and must avoid ennemies on your way to destroy the Mad Rectangle King. There are 42 levels, among them 4 bosses. The rest of the levels are based on dodging waves of ennemies. Canvas is changing a little among the levels. The development: I have been working for almost a year, coding from time to time. To be honest, I did not plan the game at all: I wanted to learn how to use canvas and how to build games. This means that the game was made step by step, adding new way for me to play with the canvas. This is why it may be repetitive and poorly structured, but I really enjoyed doing it and I tried to make it entertaining and challenging. All development was made with native Javascript and just a bit of Jquery. All graphics are made with canvas drawing, there are no image at all. Musics were made using Soundbox. All the code is available here if you are curious. If you have any feedback, issues, advices ; just let me know! Thank you all!
  24. Hello, this is my first game post here I think. I made a little game for js13k, though due to unforseen accident I got injured and got discharged from hospital today so I missed the deadline horribly xD. Well the game is working fine so I'll at least present it here for you guys :-). There are a few bugs which occur sometimes but the game mechanics itself are intact and work perfectly fine (ehm perfectlye ... kinda hopefuly perfectly fine), there are no sounds and not many animations, I will be upgrading the game with time after I get better. Theme was: Reversed. Total size (zip): 10kB (out of 13 possible kB). It's endless scroller action game, get the highest score possible and post it here! I got up to 35950 so far but I'm going to get more hopefuly. Link to the game is here. I tested the game in latest chrome and firefox and everything worked fine (firefox is way faster for me but it's the same with any other game so I guess it's just the browser thing in my case?). Game has some basic resize mechanism so it should fit to different screen sizes, unfortunately playable only on computer (I haven't implemented any other controls but keyboard - I'll give it more polishing and refactor the whole thing after I get better). The game has progressive elements, the longer you can manage to survive the better, difficulty increases as well as your ship's getting stronger. Link to the game is here. Some screenshots: I'd love to hear your opinions so please don't hesitate to bash me! :-) Best regards, AzraelTycka. EDIT: corrected few bugs and polished the game mechanics to make it more entertaining.
  25. Heya all! It's been a while since my last post here, but here it goes... Let me present you my entry for this year's js13kGames competition - Captain Reverso: The missing truckers Link to the entry: Plot You're a truck driver named Bob, who wakes up one day with a huge hangover, realizing that for some mysterious reason all other truckers disappeared... That's how Captain Reverso is born! This year's competition theme was Reversed and flawless reversing is Captain Reverso's super power! Your quest is to park all the trailers on time and safe the world from complete chaos. Controls wasd / arrows - drive / menu navigationspace / enter - attach/detach trailer / menu clickescape - pause gameNotes Use Chrome or Safari for the best user experience. The game also runs Firefox (crap performance) and IE11 (no sound). Screenshots The final build size is 13.311 bytes. The game itself is quite difficult at the beginning so take your time in the tutorial level to practice. I'm planning to write a longer post-mortem after the results so stay tuned! Hope you enjoy that