One JavaScript instance every day-canvas drawing, javascript-canvas

One JavaScript instance every day-canvas drawing, javascript-canvas

<! DOCTYPE html> 



In html 5, how does one use javascript to draw a smiling face in the canvas?
Use basic path API
Note that the cached path information will be drawn to the canvas only after fill or stroke is uploaded.
Function drawShape (){
Var canvas = document. getElementById ('your canvas id ');
If (canvas. getContext ){
Var ctx = canvas. getContext ('2d ');
 
Ctx. beginPath ();
Ctx. arc (75,75, 50,0, Math. PI * 2, true); // excircle
Ctx. moveTo (110,75 );
Ctx. arc (75,75, 35,0, Math. PI, false); // mouth
Ctx. moveTo (65,65 );
Ctx. arc (60, 65, 5, 0, Math. PI * 2, true); // left eye
Ctx. moveTo (95,65 );
Ctx. arc (90,65, 5, 0, Math. PI * 2, true); // right eye
Ctx. stroke ();

} Else {
Alert ('your browser does not support html5, please use chrome or Firefox safari .');
}
}

Javascript defines a class for display in canvas. After an instance is generated, how can we execute corresponding mouse events on it?
This operation can only add events to the canvas, and then determine whether the clicked Position overlaps the rectangle.