How to use HTML5 Canvas rounded corner
This article describe about HTML5 Canvas rounded corner.
HTML5 canvas rounded corner
HTML5 canvas rounded corner is use arcTo() method, which is define by control point and a radius in rounded corner.
Syntax
<script> context.arcTo(controlX,controlY,endX,endY,radius);
</script> |
Example
|
<!DOCTYPE HTML>
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function ()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var rectWidth = 160;
var rectHeight = 80;
var rectX = 151;
var rectY = 40;
var cornerRadius = 40;
context.beginPath();
context.moveTo(rectX, rectY);
context.lineTo(rectX + rectWidth - cornerRadius, rectY);
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
context.lineTo(rectX + rectWidth, rectY + rectHeight);
context.lineWidth = 5;
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="180"></canvas>
</body>
</html>
|
Output
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here