Back our Angular 4 Book on Kickstarter.

Access an HTML5 Canvas -- Build a Color Picker in Angular 2 - Part 2

This is the second in a series of articles about building a color picker in Angular 2. The previous article focused on building the infrastructure and showing you how to use an external template in an Angular 2 component. This article will focus on creating the canvas, accessing it from Angular, and then using it to load an image.

Create Canvas

To create the canvas, open up the template, canvas.html. Add a canvas element:


<canvas id="imageCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;" >
Your browser does not support the HTML5 canvas tag.
</canvas>

It is that easy. The canvas is named imageCanvas with the id tag. I specified a height and width which is equal to the image we'll use. I also gave the canvas a border. Beyond that, the canvas doesn't do anything yet.

Access Canvas in Code

Drilling into the HTML template to get a handle on the underlying canvas was harder to figure out than I thought it would be. The answer is to add a queries attribute to the AppComponent:


ng.core.Component({
selector: 'colorpicker-app',
templateUrl : '03canvas.html',
queries : {
imageCanvas : new ng.core.ViewChild('imageCanvas'),
}
})

The queries attribute creates a new viewChild. The name of the child is the same as the id we put to the canvas, so behind the scenes Angular will give us a hook to the HTML element so we can access it inside the class.

Load the Image

The final step for this article is to load an image into the canvas. I found a colorful creative commons image from Flickr that will do great for our demo.

To load an image onto the canvas, we need to get access to the imageCanvasContext, so create a variable for that inside the colorpicker-app's component constructor:


.Class({
constructor: function() {
var imageCanvasContext;
}
});

That just creates a variable, let's execute a method on startup:


this.onInit = function(){
}
this.onInit();

This is a convention I use commonly in my AngularJS 1 applications, and I'm just mimicking it here. I haven't decided if it is a good convention yet, but it works.

First, load the image:


var myImg = new Image();
myImg.src = 'ColorfulImage.jpg';

Easy enough! When the image has completed loading, we want to add it onto the Canvas. First, add a function for the onload() event of the Image:


myImg.onload = function() {
}

Inside the onload() function, get access to the 2D canvas context:


imageCanvasContext = imageCanvas.getContext('2d');

We need access to the context before we can draw on the canvas. Next, draw the image:


imageCanvasContext.drawImage(myImg, 0, 0);

This uses the drawImage() method on the canvas context. The image is placed at coordinates 0,0. Since we purposely sized the canvas to the size of the image, the image should cover the whole canvas.

Run the app:

View the app here. Unfortunately, I can't provide a link to a plunker for this sample because cross domain issues would prevent the image from loading.

What's Next?

The primary purpose of this entry was to show you how to get access to an HTML element inside a component's HTML. The final entry in this series will show you how to interact with the canvas, when it is clicked.

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.