Canvas How to - Use clipping region to keep text out of the y-axis

Question

We would like to know how to use clipping region to keep text out of the y-axis.

Answer


<!-- w w  w.java  2 s  .  co  m-->

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
canvas {
  border: 1px solid red;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        clipTextToGrid(50, "HELLO", "48px verdana");
        function clipTextToGrid(leftAxisBorder, theText, font) {
            ctx.save();
            ctx.beginPath();
            ctx.rect(leftAxisBorder, 0, canvas.width - leftAxisBorder, canvas.height);
            ctx.clip();
            ctx.font = font;
            ctx.fillText(theText, 3, 50);
            ctx.restore();
        }
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

The code above is rendered as follows: