Function render

web/scripts/viewer.js:169–235

()

}

function render() {
	var canvas = document.querySelector('#image_canvas');
	var ctx = canvas.getContext('2d');

	canvas.style.width='100%';
	canvas.style.height='94%';
	canvas.width  = canvas.offsetWidth;
	canvas.height = canvas.offsetHeight;

	var scale = Math.min(canvas.width / img.width, canvas.height / img.height);

	var im_x = canvas.width/2-img.width*scale/2;
	var im_y = canvas.height/2-img.height*scale/2;
	ctx.translate(im_x, im_y);
	ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);

	var startIdx = Math.min(dets.length, settings.top_k)-1;
	var endIdx   = (settings.show_one ? startIdx : 0);

	// Draw masks behind everything
	for (var i = startIdx; i >= endIdx; i--) {
		if (settings.show_mask) {
			var mask = masks[i];
			if (typeof mask == 'undefined') {
				masks[i] = load_RLE(dets[i].mask, hexToRgb(colors[i % colors.length]));
				masks[i].onload = function() { render(); }
			} else {
				ctx.globalAlpha = settings.mask_alpha / 255;
				ctx.drawImage(mask, 0, 0, mask.width * scale, mask.height * scale);
				ctx.globalAlpha = 1;
			}
		}
	}

	for (var i = startIdx; i >= endIdx; i--) {
		ctx.strokeStyle = colors[i % colors.length];
		ctx.fillStyle   = ctx.strokeStyle;
		ctx.lineWidth   = 4;
		ctx.font = settings.font_height + 'px sans-serif';

		var x = dets[i].bbox[0] * scale;
		var y = dets[i].bbox[1] * scale;
		var w = dets[i].bbox[2] * scale;
		var h = dets[i].bbox[3] * scale;

		if (settings.show_bbox) {
			ctx.strokeRect(x, y, w, h);
			ctx.stroke();
		}

		var text_array = []
		if (settings.show_class)
			text_array.push(dets[i].category);
		if (settings.show_score)
			text_array.push(Math.round(dets[i].score * 1000) / 1000);

		if (text_array.length > 0) {
			var text = text_array.join(' ');