CODEWITHSUNDEEP
javascripthtmlangularjsionic-frameworkhtml5-canvas
kayasa
kayasa

Reputation: 2085

Draw on Image loaded inside HTML canvas

I have a HTML canvas in Ionic app.

 <canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas>

In this canvas, I am loading an image. Below is the code from controller

var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = $stateParams.imageId;

        img.onload = function() {
           context.drawImage(img, 0, 0, canvas.width, canvas.height);
        }

After the image is loaded, users need the ability to write on the image and circle/highlight certain areas of the image.

Doesn't HTML canvas provide this feature by default? Right now I am not able to annotate anything on the image. How can I achieve this?

Upvotes: 0

Views: 733

Answers (1)

Shadetheartist
Shadetheartist

Reputation: 428

You need to implement this yourself.

You can do it by hooking into the mouse click / move events. using your 2d context, draw small rectangle at the mouse's current position if the most moves and the left mouse button is down.

The effect is similar to a Windows paint pencil tool. Here's a simple example.

<html>

<head>
<style>
	canvas{
		border: 1px solid black;
	}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>

<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	
	var isMouseDown = false;
	
	canvas.onmousedown = function(e){
		isMouseDown = true;
	}
	
	canvas.onmouseup = function(e){
		isMouseDown = false;
	}
	
	canvas.onmousemove = function(e){
	
		if(isMouseDown === false){
			return;
		}
	
		var canvasPosition = canvas.getBoundingClientRect();
	
		var x = e.clientX - canvasPosition.left;
		var y = e.clientY - canvasPosition.top;
		
		ctx.fillRect(x, y, 2, 2);
	};
</script>
</body>
</html>

Upvotes: 1

Related Questions