The RGraph and SVG/canvas news and updates blog for the year 2013
Syndicate the RGraph blog
The RGraph blog contains information about canvas, SVG, RGraph and demonstrates things that can be done with canvas and SVG.View blog entries from:
An example of the new resetTransform() functionWritten by Richard Heyes, 13th September 2013
resetTransform() function is now a part of Chrome development builds (Canary). This function can be used to reset the transformation matrix so that previous transforms are negated.
An interactive example showing the rotation option of the ellipse() functionWritten by Richard Heyes, 3rd September 2013
Because the ellipse can have one side longer than the other it also has a rotation argument with which you can orientate the ellipse. This example shows that - simply move your mouse around to alter the angle. REMEMBER: The angle is measured in radians not degrees. Sample code is shown so that you can reproduce the ellipse.
An interactive example showing the start and end angle options of the ellipse() functionWritten by Richard Heyes, 3rd September 2013
Like the existing arc function the new canvas ellipse function can be called and given start and end angles at which to start and end the drawing (these angles are specified in radians - not degrees). This example page shows you both arc and ellipse examples using the start and end angle arguments. The start angle is always zero (which is positioned at the 'east' axis) and the end angle is dependent on the angle that the pointer is from the center X/Y coordinates. Remember: The
ellipse() function is currently only supported by Chrome canary.
New ellipse() function interactive exampleWritten by Richard Heyes, 2nd September 2013
The new canvas
ellipse() function is now in the canary version of Chrome and there's now an interactive example for you to play with. You can drag the ellipse around with the mouse and also resize it. The resulting code is also shown for you to use.
A clickable filled Line chartWritten by Richard Heyes, 26th August 2013
The next beta release will have an
each() function - much like the jQuery
$.each() function - which is useful for iterating over arrays. The callback function gets called for each element of the array and is passed the key and value of the current element as arguments. Inside the callback function the
this variable refers to the array. And if the callback function returns false (a boolean) the iteration will cease. More information is available in the API documentation
An example of using DIV tags for hit testingWritten by Richard Heyes, 16th August 2013
As mentioned in the article that details the forth-coming hit regions addition to HTML5 canvas one option that you have for hit testing is placing DIV tags over the canvas and adding the event listeners to them. In a limited set of circumstances where the end user environment can be controlled it can save a lot of time and prevent you having to add hit testing code to your application. This article shows you an example of it.
An example of canvas videoWritten by Richard Heyes, 15th June 2013
By using the HTML5 canvas
drawImage() function, that is normally used to draw images on to your canvas tag, you can draw video on to your canvas. By repeating the
drawImage() call roughly 60 times a second you get a smooth video playback drawn on to your canvas tag. Then you can do regular canvas type things to it - in this example select the video and drag it around the canvas. The example also shows clipping in order to show the video using a circular shape.
New example of HTML5/CSS3 transformationsWritten by Richard Heyes, 12th June 2013
The older example of CSS3 3D transformations has been updated and turned into a blog article. The browser support has improved since it was created a few years ago so now you can use Chrome, Safari, Firefox, Opera (the latest edition) or Internet Explorer 10. The video is a
WebM video which only Chrome supports - so in other browsers you will see a rotating Bar chart. There is now also a demo available that will be part of the RGraph download so you can get the source from that if you prefer.
Using the globalCompositeOperation setting to achieve layersWritten by Richard Heyes, 4th May 2013
This is a demonstration of how the
globalCompositeOperation setting can be used in order to draw "behind" any content that's already on the canvas.
An example of the toDataURL() functionWritten by Richard Heyes, 26th April 2013
A new example of the HTML5 canvas
toDataURL() function is available. This function allows you to get a base64 encoded PNG representation of the canvas. You can use this function to save a bitmap copy of the canvas.
An example of using images with canvasWritten by Richard Heyes, 24th April 2013
A new example of HTML5 canvas images is available. It shows you how to use the function, one of the major pitfalls and a few examples of it being used.
An example of linear and radial gradientsWritten by Richard Heyes, 17th April 2013
A new article is available which details HTML5 canvas gradients - both linear and radial.
An example of canvas text functionalityWritten by Richard Heyes, 14th April 2013
A new article is available which details the text functionality that is available with HTML5 canvas. It also shows an example of using the
RGraph.text2() function which provides extra functionality such as horizontal and vertical alignment, bounding boxes and carriage returns.
An example of animationWritten by Richard Heyes, 12th April 2013
A guide showing how you can animate with the canvas tag. This page shows a ball randomly bouncing around the canvas.
The Canvas tag: An explanation of how you can clear itWritten by Richard Heyes, 12th April 2013
A guide explaining the different methods that you can use to clear your canvas tag. For example
clearRect(), setting the canvas dimensions, composite operations - they all have their own advantages and disadvantages and this article explains them to you.
An example of canvas shadowsWritten by Richard Heyes, 12th April 2013
This article is about shadows in HTML5 canvas. Shadows are simple things and can give your shapes a 3D appearance.
An example of the clearRect() functionWritten by Richard Heyes, 11th April 2013
This article is about the
clearRect() function. The function can clear your canvas so that it's transparent again - not white.
An example of canvas pathsWritten by Richard Heyes, 1st January 1970
A new blog article is now available that details HTML5 canvas paths and the functions that available to use in building them. It describes all of the path functions that are available to you and has an example of them in use. It also shows you how you can use the
isPointInPath() function for detecting clicks on your canvas.
An example of using the canvas clip() function to create a sliding "reveal" effectWritten by Richard Heyes, 7th April 2013
A new blog article is now available that shows how you can use the HTML5 canvas
clip() function to create a sliding reveal effect. The effect is a simple horizontal reveal but more involved paths could be used instead of the rect function if required (eg you could use the arc function to create a circular "reveal" effect).
An example of the rotate() function - as well as the RGraph.rotateCanvas() functionWritten by Richard Heyes, 10th February 2013
This is a demo of the
rotate() function - which rotates the canvas as well as the
RGraph.rotateCanvas() API function which in some cases can be easier to use.
An example of the transform() and setTransform() functionsWritten by Richard Heyes, 2nd February 2013
This is a look at the
transform() functions of HTML5 canvas. Transformations can allow you to perform actions on the canvas - sometimes significantly altering how it appears.
An example of the isPointInPath() functionWritten by Richard Heyes, 2nd February 2013
A new article is available that demonstrates the
isPointInPath() function - which can be used for hit testing to see if the mouse cursor or a click is over a particular shape. As a result your hit testing code can be reduced and greatly simplified.
An example of the canvas quadraticCurveTo() functionWritten by Richard Heyes, 29th January 2013
Because it's less of an RGraph HOWTO guide and more a general information post, the
quadraticCurveTo() function guide has been converted from a HOWTO guide to a blog post. It's been embellished a little and colors have been added to help you identify the points.
An example of the canvas bezierCurveTo() functionWritten by Richard Heyes, 29th January 2013
As it's less of an RGraph HOWTO guide and more a general information post the
bezierCurveTo() function guide has been converted from a HOWTO guide to a blog post. It's been embellished a little and colors have been added to help you identify the points.
An example of the clip() functionWritten by Richard Heyes, 29th January 2013
As it's less of an RGraph HOWTO guide and more a general information post the
clip() function HOWTO guide has been converted from a documentation page to a blog post.
What is the difference between the rect(), strokeRect() and fillRect() functions?Written by Richard Heyes, 28th January 2013
A new article is available that explains the difference between the
An example of hit regionsWritten by Richard Heyes, 24th January 2013
A new article is available that explains the new HTML5 canvas hit regions - a forthcoming addition to the canvas specification that make adding "hotspots" to your canvas easy and handling subsequent events.
An example of the canvas ellipse() functionWritten by Richard Heyes, 23rd January 2013
A new article is available that shows the
ellipse() function that is new in the canvas spec. Currently no browsers support this function, but the page does demonstrate a method for drawing ellipses using the
An example of drag and drop between canvas tagsWritten by Richard Heyes, 17th January 2013
This is an example of how you can achieve drag and drop between canvas tags. It shows drag and drop for an image - and when moving from canvas to canvas it just updates the relevant canvas that the canvas should be drawn on.
Measuring the text heightWritten by Richard Heyes, 14th January 2013
A new demonstration of a function that can measure text dimensions (width AND height). It works by adding a DIV to the document and then measuring it. The function comes from the RGraph core common file but can now be used standalone.
An example of canvas dotted and dashed linesWritten by Richard Heyes, 5th January 2013
A new article is available that shows the new
setLineDash() function that has been added to the canvas tag. Only Chrome currently supports this so to see it you'll need to use that browser. This function allows you specify the dash settings.