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
    • 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 349 results

  1. Hi guys, Intel has recently opened a new site called the HTML5 Hub. It's not just about game dev, but all aspects of HTML5. However I was pleased when they asked me to write an article for the site, so I did one about 'cutting through' images in canvas.
  2. Is there any way to increase the height of image created using HTML5 canvas putImagedata. <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(10,10,50,50); function copy() { var imgData=ctx.getImageData(10,10,50,50); ctx.putImageData(imgData,10,70); } </script> <button onclick="copy()">Copy</button> </body> </html>
  3. This is the main question, I posted it on Stack Overflow so here's the link:
  4. Hey peeps! Thought this would be a good place to show the Pixi.js roadmap. It should give you an idea of where we plan on taking pixi.js.. Create a Typescript definition file for Pixi.jsImplement Custom Render Item (currently being worked on by @GoodBoyDigital)Implement MaskingImplement Primative DrawingImplement Filters (currently being worked on by @GoodBoyDigital)Add Spine supportImplement Flash animation to pixiUpdate Loader so that it support XHR2 if it is availableImprove the Documentation of the ProjectCreate an Asset Loader TutorialCreate a MovieClip TutorialCreate a small game TutorialIf anyone has any more feature requests that dont fall into the list above then we are keen to hear them! Also If anyone wants to help out with anything in the list then by all means feel free to get in touch.
  5. I'm building a very simple platformer using tiles and I wonder which way would be the best to render the map when the target is obviously a mobile device. As far as I know there are 3 main strategies: Render game as it comes just simply checking which tiles should be in the screen in every single frame and draw the pertinent tiles. Straight forward, but the scene need to be recomposed every frame. Draw map chunks to invisible canvas layers and work with those chunks. This method seems to be flexible enough to offer good results but the question is how big should be those chunks, and how affects that in memory and performance terms. Draw the whole level in a single canvas layer and just scroll it. Is there any limit here with the size?
  6. Hey all! I am pleased to announce that I have just updated pixi.js over on github! More detail can be found on our blog: Enjoy!
  7. A micro framework for JavaScript games. Handles collision detection, the game update loop, keyboard input and canvas rendering.
  8. benny!


    Another drawing API ... Is it just me - or does the amount of relases of new javascript drawing/game API seem to explode in the last days
  9. Is there any opensource library to use xfl adobe flash animation file (xml) in javascript to get animation in canvas? Not through sprite sheet, but by using transformation?
  10. Hi, i tried to figure out how the getImageData()-Function works. After several tutorials i wrote a script to enlarge the pictures pixels in a canvas. here's my code: var canvas = document.getElementById('canvas'); var cwidth = $("canvas").innerWidth();var cheight = $("canvas").innerHeight();if (canvas.getContext){ var ctx = canvas.getContext('2d');}var lvlImg = new Image();var lvlReady = false;lvlImg.onload = function(){ lvlReady = true; ctx.drawImage(lvlImg, lvl.x, lvl.y);}lvlImg.src = 'testbild.png';var lvl = { h: 16, w: 16, x: 0, y: 0};var pdata = new Array(); for(i=1;i<=lvl.h * lvl.w;i++){ pdata[i] = new Array(); pdata[i][0] = 0; pdata[i][1] = 0; pdata[i][2] = 0; pdata[i][3] = 0; }$(document).ready(function(){ var bd = ctx.getImageData(0, 0, 16, 16); for(i=0;i<lvl.h;i++){ for(l=0;l<lvl.w;l++){ var punktwert = (i*lvl.w) + l; var bdwert = punktwert * 4; pdata[punktwert][0] =[bdwert]; //R-Wert pdata[punktwert][1] =[bdwert + 1]; //G-Wert pdata[punktwert][2] =[bdwert + 2]; //B-Wert pdata[punktwert][3] =[bdwert + 3]; //A-Wert } } // For each pixel draw a rectangular shape filled with its color for(i=0;i<= lvl.h * lvl.w;i++){ var offsx = 20; var offsy = 20; var groessenfaktor = 3; ctx.beginPath(); var fss = "rgba(" + pdata[i][0] + "," + pdata[i][1] + "," + pdata[i][2] + "," + pdata[i][3] + ")"; ctx.fillStyle = fss; var actx = offsx + ((i%16) * groessenfaktor); var acty = offsy + (((i/16) - (i%16)) * groessenfaktor); ctx.moveTo(actx, acty); ctx.lineTo(actx + groessenfaktor, acty); ctx.lineTo(actx + groessenfaktor, acty + groessenfaktor); ctx.lineTo(actx, acty + groessenfaktor); ctx.lineTo(actx, acty); ctx.fill(); }});I tried to save the image-pixel-data in the variable "bd", but debugging with Firebug only returns: TypeError: can't convert undefined to objectpdata[punktwert][0] =[bdwert]; //R-Wert So is no array or it contains no data... Whats my fault in this case? Already now, thank you for your answers Greetings GamerXy1
  11. After reading this article on Samsung Galaxy III on Rich's site, a couple of questions have come to my mind. How many canvas layers do you use in your games? How does this number affect going multi-device? I find using multiple canvas very handy, but I know this might lower the performance when the device or browser is not so powerful. Linked to this, how do you handle the canvas clearing issue? For the moment I'm trying to clear only the changing areas, so i'ts fundamental to have more than one canvas.
  12. benny!

    iio engine

    Just came across this engine called iio engine. Link:
  13. tyson

    Water effect

    Hey all, Been messing around with some water effects. I really liked the 2.5D water effects in The Cave and wanted to see if I could get something similar in 2d, without all the baggage of Box2D. Just click or touch the screen to get the effect: Works pretty good on iOS and Android. Thinking of making it a snippet for Cocos2d-html5 or something I followed this tutorial. -Tys
  14. A couple of months ago we had a blog post about adding blending in Canvas. At the time, the feature was only in the nightly builds of Firefox and Webkit. We’re excited to see that version 22 of Firefox now has this feature enabled by default.
  15. WebCode is a vector drawing app for Mac that generates JavaScript+Canvas, CSS+HTML or SVG code.
  16. Hello, I recently started work on a game whose code can be found here - and it can be played here - (Only works on Chrome for now). Please give it some time to load the images. Spacebar to pause the game. I was initially drawing rectangles using fillRect instead of using drawImage to make the arrows. This has lead to major performance hit. I was initially getting 200-250 FPS, and now I am getting around 100-150 FPS and it sometimes randomly drops to 50 too I initialize a new image for every instance of the arrows here - Is that what is causing the slow down? Also, I am not planning to have very complicated graphic assets, so should I just draw straight on canvas. I am planning to do pixel art so there might be a lot of fillRects in that case as well. How is this usually done? I am new to this and any pointers would be nice. I would not like to use a game or physics engine though. Thanks, Prateek
  17. Drawscript is an extension for Illustrator (a tool from Adobe® Creative Cloud). It generates graphics code from vector shapes in realtime. This is insanely useful Especially for sprite path data!
  18. rich

    CanvasMark 2013

    Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, canvas drawing, alpha blending, polygon fills, shadows and text functions.
  19. "In a previous post, I presented some code which would create a smoothly dithered linear gradient in HTML5 canvas. These dithered gradients look very smooth to the eye and do not suffer from the “banding” or “stepped” effect caused by integer rounding (which is especially apparent when using subtly changing dark gradients spanning a wide area). With a little bit of algebra I’ve worked out how to compute dithered radial gradients as well."
  20. rich

    Pixi.js has landed

    "For the last few months we’ve been hard at work, deep in the Goodboy code mines digging up a little treat for you all. So without further ado (insert drumroll here), it gives me great pleasure to introduce pixi.js! The aim of this project is to provide a fast, lightweight 2D library that works across all devices, both mobile and desktop. The pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It’s also fast Another javascript engine, eh?!“Why should we care?” I hear you ask “Theres loads of these engines out there!” To that I say, good question! Read on… Although I fully intended pixi.js to be used to make wonderful, juicy HTML5 games, it is not a game engine – it is a rendering engine. It puts things on your screen and thats it, although I think it does that quite well though This means you can use pixi.js in conjunction with all the other great libraries out there in javascript land without having to choose ‘A’ over ‘B’. I like to think of pixi.js as more like a 2D version of three.js so it will enable people to build all kinds of great 2D web experiences that we’ve all been building for years in Flash. Of course, games are definitely high on that list of potential applications! Another important goal of pixi.js is to tap into the raw power of webGL for its rendering speed. WebGL is an increasingly important web tech and many browsers are now supporting it by default (Gold stars for youChrome and Firefox!) and crucially mobile browsers are beginning to use it too. Firefox and Chrome beta both support webGL in their Android iterations, and I would bet my left leg that it won’t be long until safari iOS will support it too (its supported in thier iAds already)! Pixi.js does a great job of abstracting away all that crazy webGL shader hoohaa unlocking all that speed for everyone to play with. Its worth noting that it automatically handles sprite batching behind the scenes allowing for incredibly fast rendering without any extra hassle. Of course pixi.js also has a renderer that comes in canvas flavour that is optimised to the nuts too. This means that pixi.js stuff will also run on pretty much every mobile and modern browser (ie9 included!) I guess it’s also worth mentioning that I didn’t want there to be any visual differences between the two renderers… so there aren’t any Lovely for a bit of graceful degradation, or progressive enhancement depending on which side your bread’s buttered!?" Lots more details here:
  21. rich


    A simple graphics library for extremely efficient pixel based manipulation.
  22. From Modit is launching a 'Make it Anything' game dev contest which starts on 2/18/2013 and ends on 3/4/2013. You can find more info on the prize breakdown and how to enter here: Modit offers a new approach to crowd sourced HTML5 game development by letting you Take existing games Modify them without limitations (all the way down to the source code) Publish and share your games via a simple url all from within your browser. You can check out the site here: We are still in early beta if you have any feedback on the platform we would love to hear it, please post on our reddit here: All you need to enter is some inspiration. Modit hosts your game for you, you can develop and publish entirely within the browser, and there is no entry fee. If you have any questions on the contest feel free to post here and I will answer them (I am a modit employee). I look forward to seeing what you guys create.
  23. Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM. Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Also easily responds to retina display. Try out Collie for fast and easy development, tuned for best performance in various PC and mobile devices.
  24. Apply shader effects to your canvas games in real time Lovely demo here: