HTML5 画布图层显示

Question

I'm coding a simple image manipulation/drawing utility using HTML5 canvas. It currently works fine with a single canvas layer.

I'm trying to add a feature of a "preview", such that instead of a cursor displaying when it is moved over the canvas, the effect of clicking the mouse at that position is displayed. For example, if you have an image loaded in the main canvas and the selected globalCompositeOperation is saturation, you can see a preview of what the image would look like by moving the mouse around to different parts. The preview is the size of the current tool, so if it's a circle tool, radius 5, you see the effect rendered for whatever that circle is covering. If you don't click down, you only see the preview. If you click down, the effect is applied to the canvas in the area that was shown in the preview.

I have an event listener on my main canvas for mousemove, mouseup, and mousedown. Here's my current code (JS and CSS). There are two canvas tags (not shown in code below). One is my main canvas with context ctx, and the other is the mouse preview canvas, with context mouseCtx. CS refers to a global "Canvas State" object.

The code functions properly now, except that the mouse preview appears behind any elements on the main canvas (which I'd expect given the lower z-index). When I click to place an element, it pops in front of all the content. However, if I give the mouseover a higher Z-index, nothing displays on the main canvas at all.

Am I missing something silly, or is my strategy for implementing this feature way off? Thanks much for any hints toward a right direction.

 canvas.addEventListener('mousemove', mouseTrack); canvas.addEventListener('mousedown', mouseTrack); canvas.addEventListener('mouseup', mouseTrack); function mouseTrack(e) { (e.type === 'mousedown') ? CS.isDrawing = true: 0; (e.type === 'mouseup') ? CS.isDrawing = false: 0; let mouseParams = { x: e.layerX, y: e.layerY, movArr: [e.movementX, e.movementY], windowArr: [e.clientX, e.clientY] }; if (CS.isDrawing === false) { mouseCtx.clearRect(0, 0, mouseLayer.width, mouseLayer.height); mouseCtx.drawImage(canvas, 0, 0); //copy the current canvas console.log((CS.isDrawing === true) + " is drawing"); mouseCtx.strokeStyle = CS.strokeS || randomRGBA(); mouseCtx.fillStyle = CS.fillS || randomRGBA(); mouseCtx.globalAlpha = CS.lOpacity; mouseCtx.beginPath(); //draw the thing on the current canvas switch (CS.tool) { case 'tBrush': drawBrush(mouseParams, mouseCtx, CS.brush, CS.brushSize); break; case 'tLine': drawLine(mouseParams, mouseCtx); break; case 'tCurve': drawBezier(mouseParams, mouseCtx); break; case 'tCircle': drawCircle(mouseParams, mouseCtx); break; case 'tSquare': drawSquare(mouseParams, mouseCtx); break; } } else { ctx.drawImage(mouseLayer, 0, 0); } }

 canvas { position: absolute; left: 0px; top: 0px; border: 2px solid green; outline: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; cursor: none; z-index: 1; } canvas.mouseOverlay { position: absolute; left: 0px; top: 0px; border: 2px solid green; outline: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; cursor: none; z-index: 0; }

Answer 1

What might be happening is that your preview canvas is preventing events from being fired on the main canvas by getting in the way. Have you checked that the mousedown event on your main canvas is being fired? If it is indeed not being fired, try adding pointer-events:none; to your canvas.mouseOver css (with the z-index being higher).

Note: this might be a bad solution if you need to support older versions of IE