Javascript Canvas saves a Puzzle

Through the coding of the puzzle game in the original language of Python, certain complications were discovered. These primarily were in adapting the application to not be packaged as a downloadable app, but rather as a game that would function on the website. It was quickly discovered, with some heavy research, that Python does not like to have this sort of webpage functionality, and thus there was a shift towards using Javascript. This proved to be less of a challenge than expected, as this language was easily supported by HTML5. It was discovered that the Canvas functionality in this language suited the puzzle's need perfectly. The Python code that was developed was adapted easily, though some was thrown out all together as more efficient and less-costly alternatives were discovered in Javascript. (Drawing on Canvas)

(Canvas Sketch JS)

The Javascript Canvas is a DOM element, which allows for styles and positions of objects to be displayed on a webpage. This is similar to the other type of DOM, a SVG, or Scalable Vector Graphic. A Canvas is similar, but different in that it needs to redraw the image graphic every time it is modified. This can allow for functionality such as moving an object, painting, or any similar methodology. A canvas is made using the canvas tag, <canvas>. (HTML Tag) Commonly used for webgraphics is the "2d" design for canvas, though "webgl" can be used to support 3D graphical elements. For this project, 2D is the main focus as that mainly suits the needs of our puzzle games. Different elements can be manipulated using the canvas; such as the fill color, which can be used to set the color of a drawn object or background; or even the stroke, which can manipulate the size and width of a line or outline. Text may also be displayed as pixel data, on a canvas. The canvas can even serve to host animations, drawing each frame, as coded in the Javascript. (Drawing on Canvas)

For this project, mainly what is being focused on is the ability to move images, and have objects in the foreground and background. With this functionality implemented, the puzzle can be modified by the Green-Ninja engineers in order to host any storytelling and riddles that they view fit for the ultimately finished version of the game. 

(n.d.). Retrieved November 20, 2015, from http://hawksworx.com/images/sketchjs.png

Chapter 16 Drawing on Canvas. (n.d.). Retrieved November 20, 2015, from http://eloquentjavascript.net/16_canvas.html

HTML Tag. (n.d.). Retrieved November 20, 2015, from http://www.w3schools.com/tags/tag_canvas.asp