private CanvasElement prepareMissingTileImage() {
	int tileSize = DjvuContext.getTileSize();
	CanvasElement canvas = createImage(tileSize, tileSize);
	Context2d context2d = canvas.getContext2d();
	context2d.setFillStyle("white");
	context2d.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
	Image image = new Image();
	final ImageElement imageElement = image.getElement().cast();
	imageElement.getStyle().setProperty("visibility", "hidden");
	Event.setEventListener(imageElement, event -> {
		if (Event.ONLOAD == event.getTypeInt()) {
			missingTileImage.getContext2d().drawImage(imageElement, 0, 0);
			RootPanel.get().getElement().removeChild(imageElement);
		}
	});
	RootPanel.get().getElement().appendChild(imageElement);
	image.setUrl(getBlankImageUrl());
	return canvas;
}
 

public void setTile(TileInfo tileInfo, GMap bufferGMap) {
	if (bufferImageData == null || bufferImageData.getWidth() != bufferGMap.getDataWidth()
			|| bufferImageData.getHeight() != bufferGMap.getDataHeight()) {
		bufferImageData = bufferCanvas.getContext2d()
				.createImageData(bufferGMap.getDataWidth(), bufferGMap.getDataHeight());
	}
	Uint8Array imageArray = bufferImageData.getData().cast();
	imageArray.set(bufferGMap.getImageData());
	bufferCanvas.getContext2d().putImageData(bufferImageData, -bufferGMap.getBorder(), 0);

	CanvasElement tile = tiles.get(tileInfo);
	if (tile == null) {
		tile = createImage(bufferGMap.getDataWidth() - bufferGMap.getBorder(), bufferGMap.getDataHeight());
		tiles.put(new TileInfo(tileInfo), tile);
	}
	Context2d c = tile.getContext2d();
	c.setFillStyle("white");
	c.fillRect(0, 0, tileSize, tileSize);
	c.drawImage(bufferCanvas, 0, 0);
	for (Consumer<Integer> listener : tileListeners)
		listener.accept(tileInfo.page);
}
 

native void printCanvas(CanvasElement cv) /*-{
    var img    = cv.toDataURL("image/png");
    var win = window.open("", "print", "height=500,width=500,status=yes,location=no");
    win.document.title = "Print Circuit";
    win.document.open();
    win.document.write('<img src="'+img+'"/>');
    win.document.close();
    setTimeout(function(){win.print();},1000);
}-*/;
 

protected void applyResize() {
    CanvasElement element = getElement().cast();
    double ratio = getRatio();
    element.setWidth((int) (getOffsetWidth() * ratio));
    element.setHeight((int) (getOffsetHeight() * ratio));
    element.getContext2d().scale(ratio, ratio);
    getSignaturePad().clear();
}
 

public CanvasElement[][] getTileImages(int pageNum, int subsample, GRect range, CanvasElement[][] reuse) {
	CanvasElement[][] result = reuse;
	int w = range.width() + 1, h = range.height() + 1;
	if (reuse == null || reuse.length != h || reuse[0].length != w) {
		result = new CanvasElement[h][w];
	}

	tempTI.page = pageNum;
	tempTI.subsample = subsample;
	for (int y = range.ymin; y <= range.ymax; y++)
		for (int x = range.xmin; x <= range.xmax; x++)
			result[y - range.ymin][x - range.xmin] = getTileImage(tempTI.setXY(x, y));

	return result;
}
 

public static CanvasElement createImage(int width, int height) {
	Canvas canvas = Canvas.createIfSupported();
	canvas.setWidth(width + "px");
	canvas.setCoordinateSpaceWidth(width);
	canvas.setHeight(height + "px");
	canvas.setCoordinateSpaceHeight(height);
	return canvas.getCanvasElement();
}
 

public void redraw() {
	Context2d graphics2d = canvas.getContext2d();
	int w = canvas.getCoordinateSpaceWidth(), h = canvas.getCoordinateSpaceHeight();
	graphics2d.setFillStyle(background);
	graphics2d.fillRect(0, 0, w, h);
	if (pageInfo == null)
		return;

	int subsample = toSubsample(zoom);
	double scale = zoom / toZoom(subsample);
	graphics2d.save();
	int startX = w / 2 - centerX, startY = h / 2 - centerY;
	graphics2d.translate(startX, startY);
	graphics2d.scale(scale, scale);
	graphics2d.translate(-startX, -startY);
	graphics2d.scale(1, -1); // DjVu images have y-axis inverted 

	int tileSize = DjvuContext.getTileSize();
	int pw = (int) (pageInfo.width * zoom), ph = (int) (pageInfo.height * zoom);
	range.xmin = (int) (Math.max(0, centerX - w * 0.5) / tileSize / scale);
	range.xmax = (int) Math.ceil(Math.min(pw, centerX + w * 0.5) / tileSize / scale);
	range.ymin = (int) (Math.max(0, centerY - h * 0.5) / tileSize / scale);
	range.ymax = (int) Math.ceil(Math.min(ph, centerY + h * 0.5) / tileSize / scale);
	imagesArray = dataStore.getTileImages(page, subsample, range , imagesArray);
	for (int y = range.ymin; y <= range.ymax; y++) {
		for (int x = range.xmin; x <= range.xmax; x++) {
			CanvasElement canvasElement = imagesArray[y - range.ymin][x - range.xmin];
			for (int repeats = scale == 1 ? 1 : 3; repeats > 0; repeats--) {
				graphics2d.drawImage(canvasElement, startX + x * tileSize,
						-startY - y * tileSize - canvasElement.getHeight());
			}
		}
	}
	graphics2d.restore();
	// missing tile graphics may exceed the page boundary
	graphics2d.fillRect(startX + pw, 0, w, h);
	graphics2d.fillRect(0, startY + ph, w, h);

	DjvuContext.setTileRange(range, subsample);
}
 

public static String getIDCode(String id) {
    Element el = Document.get().getElementById(id);
    if (el instanceof CanvasElement) {
        return el.getAttribute("data-idcode");
    }
    return null;
}
 

private static void drawStructure(String id, String idcode, String coordinates, int displayMode,
        String[] atomText) {
    Element el = Document.get().getElementById(id);
    if (el instanceof CanvasElement) {
        CanvasElement ce = (CanvasElement) el;
        StructureElement.drawIDCode(ce, idcode, coordinates, displayMode, atomText);
    }
}
 

private static void draw(CanvasElement el, String idcode, String coordinates) {
    Canvas canvas = Canvas.wrap(el);
    if (idcode != null && idcode.length() > 0) {
        String combined = idcode + (coordinates != null ? " " + coordinates : "");
        Context2d ctx = canvas.getContext2d();
        drawMolecule(ctx, combined, canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight());
    }
}
 

public static void drawIDCode(CanvasElement el, String idcode, String coordinates, int displayMode,
        String[] atomText) {
    Canvas canvas = Canvas.wrap(el);
    if (idcode != null && idcode.length() > 0) {
        String combined = idcode + (coordinates != null ? " " + coordinates : "");
        Context2d ctx = canvas.getContext2d();
        drawMolecule(ctx, combined, canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight(),
                displayMode, atomText);
    }
}
 

native void doTouchHandlers(CanvasElement cv) /*-{
// Set up touch events for mobile, etc
var lastTap;
var tmout;
var sim = this;
cv.addEventListener("touchstart", function (e) {
       	mousePos = getTouchPos(cv, e);
 		var touch = e.touches[0];
 		var etype = "mousedown";
 		clearTimeout(tmout);
 		if (e.timeStamp-lastTap < 300) {
    		    etype = "dblclick";
 		} else {
 		    tmout = setTimeout(function() {
 		        [email protected]::longPress()();
 		    }, 500);
 		}
 		lastTap = e.timeStamp;
 		
 		var mouseEvent = new MouseEvent(etype, {
   			clientX: touch.clientX,
   			clientY: touch.clientY
 		});
 		e.preventDefault();
 		cv.dispatchEvent(mouseEvent);
}, false);
cv.addEventListener("touchend", function (e) {
 		var mouseEvent = new MouseEvent("mouseup", {});
 		e.preventDefault();
 		clearTimeout(tmout);
 		cv.dispatchEvent(mouseEvent);
}, false);
cv.addEventListener("touchmove", function (e) {
 		var touch = e.touches[0];
 		var mouseEvent = new MouseEvent("mousemove", {
   			clientX: touch.clientX,
   			clientY: touch.clientY
 		});
 		e.preventDefault();
 		clearTimeout(tmout);
 		cv.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the canvas
function getTouchPos(canvasDom, touchEvent) {
 		var rect = canvasDom.getBoundingClientRect();
 		return {
   			x: touchEvent.touches[0].clientX - rect.left,
   			y: touchEvent.touches[0].clientY - rect.top
 		};
}

   }-*/;
 

protected CanvasElement getNativeElement(){
    return canvas;
}
 

public static void drawMolecule(CanvasElement el, JSMolecule mol, JavaScriptObject options) {
    drawMolecule(el, mol, Util.getDisplayMode(options), null);
}
 

private static void drawMolecule(CanvasElement el, JSMolecule mol, int displayMode, String[] atomText) {
    StructureElement.drawMolecule(el, mol, displayMode, atomText);
}
 

public static void drawIDCode(CanvasElement el, String idcode, String coordinates, String[] atomText) {
    drawIDCode(el, idcode, coordinates, 0, atomText);
}
 

public static void drawMolecule(CanvasElement el, JSMolecule mol, int displayMode, String[] atomText) {
    Canvas canvas = Canvas.wrap(el);
    Context2d ctx = canvas.getContext2d();
    drawMolecule(ctx, mol.getStereoMolecule(), canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight(),
            displayMode, atomText);
}