RGraph and canvas news blog
The RGraph blog contains information about canvas, RGraph and demonstrates things that can be done with canvas.
- An interactive example of the arcTo function
The canvas tags arcTo function is mysterious little function. The fact that it wasn't always implemented correctly didn't help but it is now and this interactive demo will help you to understand this function.
- An example of Path2D objects
An updated article about the Path2D object is now available. It goes through the new Path2D object, its API and has usage examples. The Path2D object is currently (March 2014) only available in the canary build of Google Chrome.
- New text metrics for canvas available in Google Chrome
A new article is now available that looks at the new text metrics that have been added to Google Chrome. These metrics enable you to get more information about the dimensions of the text and most importantly they allow you to construct a bounding box. Keep in mind though that these metrics are new and may bite!
- How to get a responsive canvas tag
- An example of using DIV tags for hit testing
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 the toDataURL function
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 canvas
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.
- Drag and drop example updated
The example of drag and drop has been updated to use "click to pick up, click to put down". This makes the whole process less error prone and avoids any selection peculiarities.
- An example of linear and radial gradients
A new article is available which details HTML5 canvas gradients - both linear and radial.
- An example of getting the mouse coordinates
A new article is available which shows you how you can use the RGraph.getMouseXY function to get the mouse coordinates. Whilst doing this can be as simple as using the .offsetX/Y properties - that way isn't portable or cross-browser compatible and nor does it take into account things like CSS borders or padding. The RGraph.getMouseXY function does all this for you.
- An example of canvas text functionality
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 animation
A guide showing how you can perform animation with HTML5 canvas. This page shows a ball randomly bouncing around the canvas.
- The Canvas tag: An explanation of how you can clear it
A guide explaining the different methods that you can clear your canvas. 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 shadows
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 function
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 paths
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 click detection.
- An example of using the canvas clip function to create a sliding reveal effect
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).
- An example of the rotate function - as well as the RGraph.RotateCanvas() function
This is a demo of the rotate canvas 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 functions
This is a look at the setTransform() and 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 function
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 quadraticCurveTo() function
As 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 bezierCurveTo() function
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() function
As it's less of an RGraph HOWTO guide and more a general information post the clip() HOWTO guide has been moved to a blog post.
- What is the difference between the rect, strokeRect and fillRect functions?
A new article is available that explains the difference between the strokeRect, fillRect and rect() functions.
- An example of hit regions
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 function
A new article is available that shows the ellipse() function that is new in the canvas spec. Currenty no browsers support this function, but the page does demonstrate a method for drawing ellipses using the bezierCurveTo() function.
- An example of drag and drop between canvas tags
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 height
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 lines
A new article is available that shows the new setLineDash() function that has been added to canvas. Only Chrome currently supports this so to to see it you'll need to use that browser. This function allows you specify the dash settings.
- How to add magnification to your charts
A new blog article showing you how you can add a magnifying glass effect to your canvas (the effect will work with any canvas - not just RGraph charts). The article uses the canvas transformation methods - scale(), translate() and clip().
- New canvas features
This is an preview of new HTML5 canvas features that have been added to the HTML5 specification. Things like path objects, hit regions and other enhancements that will server to make canvas much easier to use.