Always remain updated about current software development trends

Html5 Canvas Tutorials

3.6.4 HTML5 Canvas Transition Callback with KineticJS

By Eric Rowell

To define a callback for a transition with KineticJS, we can set the callback property of a transition config config object to a function. HTML5 Canvas Transition Callback Example Instructions: Wait for the transition to complete Open in new window Code Editor...

3.5.5 HTML5 Canvas Hide and Show Shape with KineticJS

By Eric Rowell

To hide and show a shape with KineticJS, we can set the visible property when we instantiate a shape, or we can use the hide() and show() methods. HTML5 Canvas Hide and Show a Shape with KineticJS Example Instructions: Click on the buttons to show and hide...

3.5.4 HTML5 Canvas Set Line Join with KineticJS

By Eric Rowell

To set the line join for a shape withKineticJS, we can set thelineJoinproperty when we instantiate a shape, or we can use thesetLineJoin()method.  The line join property can be set tomiter,bevel, orround.  Unless otherwise specified, the default line...

3.5.2 HTML5 Canvas Set Shape Stroke Color and Width with KineticJS

By Eric Rowell

To set a shape stroke and stroke width with KineticJS, we can set the stroke and strokeWidth properties when we instantiate a shape, or we can use the setStroke() and setStrokeWidth() methods. HTML5 Canvas Set Shape Stroke and Stroke Width with KineticJS Example...

3.5.1 HTML5 Canvas Set Fill with KineticJS

By Eric Rowell

To set a shape fill withKineticJS, we can set the fill property when we instantiate the shape, or we can use thesetFill()method.

3.5.3 HTML5 Canvas Set Alpha with KineticJS

By Eric Rowell

To set a shape alpha withKineticJS, we can set the alpha property when we instantiate the shape, or we can use thesetAlpha()method.  Shapes can have an alpha value between 0 and 1, where 0 is fully transparent, and 1 is fully opaque.  Unless otherwise...

3.5.2 HTML5 Canvas Move Shape to Another Container with KineticJS

By Eric Rowell

To move a shape from one container into another withKineticJS, we can use themoveTo()method which requires a container as a parameter.  A container can be another stage, a layer, or a group.  You can also move groups into other groups and layers,...

3.2.10 HTML5 Canvas Get Event Shape with KineticJS

By Eric Rowell

To get the event shape withKineticJS, we can use access theshapeproperty of the Event object.

3.2.8 HTML5 Canvas Listen or Don’t Listen to Events with KineticJS

By Eric Rowell

To listen or don't listen to events withKineticJS, we can set thelisteningproperty of the config object totrueorfalsewhen a shape is instantiated, or we can set the listening property with thelisten()method.

3.2.2 HTML5 Canvas Pixel Detection with KineticJS

By Eric Rowell

To detect shapes and images using pixel detection withKineticJS, we can set the detectionType property of the config object topixel.