<! DOCTYPE html>
<title></title>
<body>
<!--canvas Width/height by default
<canvas id= "FillRect" width= "height=" ></canvas>
<canvas id= "Strokerect" width= "height=" ></canvas>
<canvas id= "arc" width= "height=" ></canvas>
<script type= "Text/javascript" >
function Canvasfillrect (ID) {//Draw rectangle Solid
var canvas = document.getElementById (ID);
var context = Canvas.getcontext ("2d");
Context.fillstyle = "Pink";
Context.fillrect (0, 0, 100, 100);
}
Canvasfillrect ("FillRect");
function Canvasstrokerect (ID) {//Draw rectangle Hollow
var canvas = document.getElementById (ID);
var context = Canvas.getcontext ("2d");
Context.strokestyle = "Red";
Context.strokerect (0, 0, 100, 100);
}
Canvasstrokerect ("Strokerect");
function Canvasarc (ID) {//Draw Center Solid Hollow
var canvas = document.getElementById (ID);
var context = Canvas.getcontext ("2d");
Solid
Context.fillstyle = "green";
Context.beginpath ();
Context.arc (0, Math.PI * 2, true);
Context.closepath ();
Context.fill ();
Hollow
Context.beginpath ();
Context.arc (0, Math.PI * 2, true);
Context.closepath ();
Context.strokestyle = "Yellow";
Context.stroke ();
}
Canvasarc ("arc");
</script>
</body>
Canvas Draw Rectangle Circle
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
