HTML code:<! DOCTYPE HTML >
<HTML> <Head> <title>Online drawing</title> <MetaCharSet= "Utf-8" /><style>
#d {margin-left:30%;}
</style></Head> <Body><div id= "D" >
<CanvasID= "Canvas"width= "$"Height= "$"style= "border:1px solid red;"></Canvas>
</div>
</Body></HTML>
JavaScript code:
1<script>2 varCanvas=document.getelementbyid ("Canvas");3 varCtx=canvas.getcontext ("2d");4 5canvas.onmousedown=function(event) {6 varx=event.clientx-Canvas.offsetleft;7 vary=event.clienty-Canvas.offsettop;8 Ctx.beginpath ();9 Ctx.moveto (x, y);Ten OneDocument.onmousemove=function(event) { A varx=event.clientx-Canvas.offsetleft; - vary=event.clienty-Canvas.offsettop; - Ctx.lineto (x, y); thectx.strokestyle= "Red"; - Ctx.stroke (); - }; - }; +document.onmouseup=function(){ - Ctx.closepath (); +Document.onmousemove=NULL; A }; at</script>
After running:
Canvas to create an online drawing version
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
