Articles tagged: Canvas

Found 175 documents

Archive/Apps/Graphics_and_UX When creating Open Web Apps, you need to give a lot of consideration to the look and feel, user ...
Archive/Firefox_OS/Firefox_OS_apps/Reference_apps/Webfighter
Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas Of course it depends on your approach — designers may favor the online editor while programmers ...
Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor Now you can check the PlayCanvas engine article if you haven't seen it yet, go back to the ...
Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine Now you can continue reading the PlayCanvas editor article, go back to the Building up a basic ...
Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js In this article we'll take you through the real basics of using Three, including setting up a ...
Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js Whitestorm.js is a framework built on the top of Three.js technology, enhanced by features such ...
Games/Techniques/Crisp_pixel_art_look This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art ...
Games/Techniques/Tilemaps Tilemaps are a very popular technique in 2D game development, consisting of building the game ...
Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Scrolling_maps This article covers how to implement scrolling square tilemaps using the Canvas API.
Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps This article covers how to implement static square tilemaps using the Canvas API.
Games/Tutorials This page contains multiple tutorial series that highlight different workflows for effectively ...
Games/Tutorials/2D_breakout_game_Phaser In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, ...
Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens To make the game look more juicy and alive we can use animations and tweens. This will result in ...
Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls Now that physics have been introduced, we can start implementing collision detection into the ...
Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field Building the brick field is a little bit more complicated than adding a single object to the ...
Games/Tutorials/2D_breakout_game_Phaser/Buttons Instead of starting the game right away we can leave that decision to the player by adding a ...
Games/Tutorials/2D_breakout_game_Phaser/Collision_detection Now onto the next challenge — the collision detection between the ball and the bricks. Luckily ...
Games/Tutorials/2D_breakout_game_Phaser/Extra_lives We can make the game enjoyable for longer by adding lives. In this article we'll implement a ...
Games/Tutorials/2D_breakout_game_Phaser/Game_over To make the game more interesting we can introduce the ability to lose — if you don't hit the ...
Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework Before we can start writing the game's functionality, we need to create a basic structure to ...
Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen Our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying ...
Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it ...
Games/Tutorials/2D_breakout_game_Phaser/Physics For proper collision detection between objects in our game we will need to have physics; this ...
Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls We have the ball moving and bouncing off the walls, but it quickly gets boring — there's no ...
Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay You've finished all the lessons — congratulations! By this point you would have learnt the ...
Games/Tutorials/2D_breakout_game_Phaser/Scaling Scaling refers to have the game canvas will scale on different screen sizes. We can make the ...
Games/Tutorials/2D_breakout_game_Phaser/The_score Having a score can also make the game more interesting — you can try to beat your own highscore, ...
Games/Tutorials/2D_breakout_game_Phaser/Win_the_game Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls It is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field After modifying the gameplay mechanics, we are now able to lose — this is great as it means the ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection We have the bricks appearing on the screen already, but the game still isn't that interesting as ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it Before we can start writing the game's functionality, we need to create a basic structure to ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up There's always a room for improvements in any game we write. For example, we can offer more than ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls The game itself is actually finished, so let's work on polishing it up. We have already added ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball You already know how to draw a ball from working through the previous article, so now let's make ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls The ball is bouncing off the walls freely and you can watch it indefinitely, but currently ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win Destroying the bricks is really cool, but to be even more awesome the game could award points ...
Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation I hope this tutorial will help you dive into 2D game development and inspire you to create ...
Learn/JavaScript/Objects/Object_building_practice We hope you had fun writing your own real world random bouncing balls example, using various ...
Mozilla/Add-ons/Code_snippets/Canvas For general information about using canvas see the canvas topic page.
Web/API/CanvasGradient The CanvasGradient interface represents an opaque object describing a gradient. It is returned ...
Web/API/CanvasGradient/addColorStop The CanvasGradient.addColorStop() method adds a new stop, defined by an offset and a color, to ...
Web/API/CanvasImageSource CanvasImageSource is a helper type representing any objects of one of the following types: ...
Web/API/CanvasPattern The CanvasPattern interface represents an opaque object describing a pattern, based on an image, ...
Web/API/CanvasPattern/setTransform The CanvasPattern.setTransform() method uses an SVGMatrix object as the pattern's transformation ...
Web/API/CanvasRenderingContext2D To get an object of this interface, call getContext() on a canvas element, supplying "2d" as the ...
Web/API/CanvasRenderingContext2D/addHitRegion The CanvasRenderingContext2D.addHitRegion() method of the Canvas 2D API adds a hit region to the ...
Web/API/CanvasRenderingContext2D/arc The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds an arc to the path which is ...
Web/API/CanvasRenderingContext2D/arcTo The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds an arc to the path with ...
Web/API/CanvasRenderingContext2D/asyncDrawXULElement The non-standard and internal only CanvasRenderingContext2D.asyncDrawXULElement() method of the ...
Web/API/CanvasRenderingContext2D/beginPath The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by ...
Web/API/CanvasRenderingContext2D/bezierCurveTo The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API adds a cubic Bézier ...
Web/API/CanvasRenderingContext2D/canvas The CanvasRenderingContext2D.canvas property is a read-only reference to the HTMLCanvasElement ...
Web/API/CanvasRenderingContext2D/clearHitRegions The CanvasRenderingContext2D.clearHitRegions() method of the Canvas 2D API removes all hit ...
Web/API/CanvasRenderingContext2D/clearRect The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API sets all pixels in the ...
Web/API/CanvasRenderingContext2D/clip The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the path currently being ...
Web/API/CanvasRenderingContext2D/closePath The CanvasRenderingContext2D.closePath() method of the Canvas 2D API causes the point of the pen ...
Web/API/CanvasRenderingContext2D/createImageData The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ...
Web/API/CanvasRenderingContext2D/createLinearGradient The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a ...
Web/API/CanvasRenderingContext2D/createPattern The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using ...
Web/API/CanvasRenderingContext2D/createRadialGradient The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial ...
Web/API/CanvasRenderingContext2D/currentTransform The CanvasRenderingContext2D.currentTransform property of the Canvas 2D API returns or sets an ...
Web/API/CanvasRenderingContext2D/direction The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text ...
Web/API/CanvasRenderingContext2D/drawFocusIfNeeded The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring ...
Web/API/CanvasRenderingContext2D/drawImage The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to ...
Web/API/CanvasRenderingContext2D/drawWidgetAsOnScreen The non-standard and internal only CanvasRenderingContext2D.drawWidgetAsOnScreen() method of the ...
Web/API/CanvasRenderingContext2D/drawWindow The non-standard and internal only CanvasRenderingContext2D.drawWindow() method of the Canvas 2D ...
Web/API/CanvasRenderingContext2D/ellipse The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an ellipse to the path ...
Web/API/CanvasRenderingContext2D/fill The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path ...
Web/API/CanvasRenderingContext2D/fillRect The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a filled rectangle at ...
Web/API/CanvasRenderingContext2D/fillStyle The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color or ...
Web/API/CanvasRenderingContext2D/fillText The CanvasRenderingContext2D.fillText() method of the Canvas 2D API fills a given text at the ...
Web/API/CanvasRenderingContext2D/filter The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects like ...
Web/API/CanvasRenderingContext2D/font The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style ...
Web/API/CanvasRenderingContext2D/getImageData The CanvasRenderingContext2D.getImageData() method of the Canvas 2D API returns an ImageData ...
Web/API/CanvasRenderingContext2D/getLineDash The CanvasRenderingContext2D.getLineDash() method of the Canvas 2D API gets the current line ...
Web/API/CanvasRenderingContext2D/globalAlpha The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha value ...
Web/API/CanvasRenderingContext2D/globalCompositeOperation The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the ...
Web/API/CanvasRenderingContext2D/imageSmoothingEnabled The CanvasRenderingContext2D.imageSmoothingEnabled property of the Canvas 2D API can be set to ...
Web/API/CanvasRenderingContext2D/isPointInPath The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not ...
Web/API/CanvasRenderingContext2D/isPointInStroke The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or ...
Web/API/CanvasRenderingContext2D/lineCap The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines how the end points ...
Web/API/CanvasRenderingContext2D/lineDashOffset The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash ...
Web/API/CanvasRenderingContext2D/lineJoin The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines how two ...
Web/API/CanvasRenderingContext2D/lineTo The CanvasRenderingContext2D.lineTo() method of the Canvas 2D API connects the last point in the ...
Web/API/CanvasRenderingContext2D/lineWidth The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines ...
Web/API/CanvasRenderingContext2D/measureText The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains ...
Web/API/CanvasRenderingContext2D/miterLimit The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio ...
Web/API/CanvasRenderingContext2D/moveTo The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API moves the starting point of a ...
Web/API/CanvasRenderingContext2D/putImageData The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the ...
Web/API/CanvasRenderingContext2D/quadraticCurveTo The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API adds a quadratic ...
Web/API/CanvasRenderingContext2D/rect The CanvasRenderingContext2D.rect() method of the Canvas 2D API creates a path for a rectangle ...
Web/API/CanvasRenderingContext2D/removeHitRegion The CanvasRenderingContext2D.removeHitRegion() method of the Canvas 2D API removes a given hit ...
Web/API/CanvasRenderingContext2D/resetTransform The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current ...
Web/API/CanvasRenderingContext2D/restore The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently ...
Web/API/CanvasRenderingContext2D/rotate The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the ...
Web/API/CanvasRenderingContext2D/save The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the ...