canvas在图片上画矩形框和点，并控制显隐

1、定义document canvas元素 

<canvas id = "image-canvas">

<canvas id="rectangle-canvas" >
<canvas id="point-canvas">

2、画图片

var  imageCanva = document.getElementById("image-canvas"); //获取canvas元素
var imagectx = imageCanva.getContext('2d');  //获取上下文
this.pictureCanvasCtx = imagectx;

ctx.clearRect(0,0,imageCanvas.width,imageCanvas.height);  //清除图层

var img = new Image();

img.src = '''../../../图片地址.png'
image.onload = function(){

       let xRate = myCanvas.width/img.width;          算出x和y的压缩比，使得图片铺满整个canvas窗口，当然，无此需求可省略

       let yRate = myCanvas.height/img.height;

       ctx.drawImage(this,0,0,img.width*xRate,img.height*yRate);  //this指照片，0,0起始（左上角）左边，后边两个参数是长和高

      //画矩形框    不同图层，当然也可同一图层

    var  rectCanva = document.getElementById("rect-canvas"); //获取canvas元素
   var rectctx =rectCanva.getContext('2d');  //获取上下文
     rectctx.beginPath();

     rectctx.lineWidth=“2”； //矩形线宽

   rectct.stokeStyle = 'red'    ;//矩形线填充

recttx.rect((坐上角的x坐标)*xRate,(左上角的y坐标)* yRate,(矩形宽)*xRate,（矩形高）*yRate);

recctx.stroke();

 

    var  pointCanva = document.getElementById("point-canvas"); //获取canvas元素
   var pointctx =pointCanva.getContext('2d');  //获取上下文
     pointctx.beginPath();

    pointctx.stokeStyle = 'red'    ;//点填充

    pointctx.arc((点中心x坐标)*xRate,(点中心y坐标)*yrate,1,0,2*Math.PI);

     pointctx.stroke();

}

3、控制显隐通过visibility属性

例 document.getElementById(rect-canvas).style.visibility='visible';  //显示 或hidden进行隐藏

注，内网开发，代码无法粘贴，纯页面手打，错误不可避免，重在理解思路