In this article, we will learn how to draw image on canvas and download it.
Introduction:
The HTML <canvas> element is used to draw graphics. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
Canvas enable us to draw text as well as graphics. We can also animate canvas object.
Canvas’ methods for animations, offer a lot of possibilities for HTML gaming applications.
We’ll also learn how to overlay images on canvas in this article.
The globalCompositeOperation compositing property in HTML5 canvas has an impact on all drawing processes. Using the globalCompositeOperation property, we can draw new shapes behind existing shapes.
For globalCompositeOperation, the following values can be used:
source-over:
This is the default mode, which draws new shapes on top of the existing canvas.
source-in:
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.
source-out:
The new shape is drawn where it doesn’t overlap the existing canvas content.
source-atop:
source-atop compositing clips new image inside an existing shape. Draw only inner shadow of the new inside existing one.
destination-over:
Compositing with “destination-over” adds a new drawing on top of an existing drawing.
destination-in:
“destination-in” compositing clips existing drawings inside a new shape.
destination-out:
The existing content is kept where it doesn’t overlap the new shape.
destination-atop:
Only the parts of the old canvas that overlap the new shape are retained. The new shape is created behind the existing shape on the canvas.
let’s create project and implement it!
Create new project
create project in visual studio code with this command.
ng g new <project_name>
Create image folder
create image folder in src/assets and save image to draw it on canvas.
app.component.html
open the html file and place the below code to it.
<div style="text-align: center;">
<canvas id="canvas" width="600" height="600">your canvas loads here</canvas><br /><br />
<button class="btn btn-dark" (click)="saveImage()">Download</button>
</div>
app.component.ts
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'CanvasImage';
public canvas:any;
constructor() {}
ngOnInit(){
this.canvas=document.getElementById("canvas");
var context=this.canvas.getContext('2d');
var image = new Image();
setTimeout(() => {
image.onload = function () {
context.globalCompositeOperation = 'destination-over';
context.drawImage(image, 0, 0, self.canvas.width, self.canvas.height);
};
image.src ="/assets/images/background.png";
}, 100);
context.globalCompositeOperation = 'source-over';
image.onload = function () {
context.drawImage(image, 200,200);
};
image.src = "/assets/images/image1.png";
}
saveImage() {
var image = this.canvas.toDataURL();
var tmpLink = document.createElement('a');
tmpLink.download = 'image.png';
tmpLink.href = image;
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
}
}
declare global {
interface Window {
canvas:any;
}
}
Now run the project.
OUTPUT:
