Question

I have created a Canvas using:

Canvas canvas = Canvas.createIfSupported();

and added it to the DOM via:

RootPanel.get("canvasContainer").add(canvas);

When I open up the page in Chrome and click it, it highlights with an orange focus border. In the Android browser, when touching the canvas, the entire canvas is highlighted with a semitransparent blue overlay, as well as a solid blue border, as if the canvas was selected.

How do I change this behavior, so that the canvas isn’t highlighted in any way when clicked/touched?

Answer 1

Add

canvas {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

into your canvas tag CSS.