About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

Drawing a curved image on canvas using clipping

Written by Richard Heyes, RGraph author, on 2nd December 2023

Here's an example of a curved image - which is not terribly difficult to achieve but it can't be done by just calling a function or setting an option - but clipping to the rescue! This first came to my attention because of this article: https://programming.bogdanbucur.eu/drawing-a-curved-image-with-a-html5-canvas-and-javascript/ which uses a different method but this method uses clipping (read the reference page for the clip function here: https://www.rgraph.net/canvas/reference/clip.html). The code for the example is shown below and the comments in the code should provide you with some information about what it's doing.

    >script<
        // Get hold of the context so that we can draw
        context = document.getElementById('cvs').getContext('2d');

        //
        // Load the image first. When it has loaded call the
        // draw() function to draw the image. Then add some
        // text.
        //
        var img = new Image();
        img.src = '/images/page-blog-curved-image.png';
        img.onload = function ()
        {
            // When the image has loaded - call the draw()
            // function that draws the image on to the
            // canvas
            draw();

            //
            // Draw the text that you can see beneath the image.
            // Despite being higher up in the code than the draw()
            // function, this text is actually drawn last.
            //
            context.font      = '26pt Arial';
            context.textAlign = 'center';
            context.fillText('A curved image!', 300,230);
        };




        //
        // This is the main draw function that draws on the
        // canvas
        //
        function draw()
        {
            //
            // Save the canvas state before clipping so that
            // it be reset after drawing has finished
            //
            context.save();

            //
            // Start a new path and draw the outline of the curved shape.
            // This shape will not be immediately drawn on to the canvas -
            // first we're going to clip to the shape and then draw the
            // image. So the image will be constrained to the area within
            // the shape. Only after the image has been drawn will the
            // path that we're drawing here be stroked to the canvas in
            // black (producing the black outline that you can see around
            // the image).
            //
            context.beginPath();
            context.moveTo(100,200);
            context.lineTo(100,50);
            context.quadraticCurveTo(300, 0, 500, 50);
            context.lineTo(500,200);
            context.quadraticCurveTo(300, 150, 100, 200);
            context.closePath();
            context.clip();

            //
            // Draw the image
            //
            context.drawImage(img,0,-40);
            
            //
            // Restore the canvas state now that the
            // image has been drawn (effectively
            // turning off clipping.
            //
            context.restore();

            //
            // Now that clipping has been turned off, stroke
            // the path that was first made (ie what was defined
            // to be the clip path to make the outline)
            //
            context.lineWidth = 3;
            context.stroke();
        }
    </script>