Embedded Files
Principle
Principle
The principle of "pattern" drawing is based on repeating an image (if the image is smaller than the surface of the shape you are going to draw) for filling the surface of objects to be drawn (either filled or stroked).
To illustrate this principle, in the next examples, we are going to draw rectangles using a pattern.
There are a few steps we have to take before doing this:
1- Create a JavaScript image object
var imageObj = new Image();
2- Define a callback function that will be called once the image has been fully loaded in memory; we cannot draw before the image has been loaded.
imageObj.onload = function(){
...
}
3- Set the source of this image to the URL of the pattern:
imageObj.src = "https://www.myserver.com/myRepeatablePattern.png";
4- Create a pattern object from the loaded image: As soon as step 3 is executed, an HTTP request is sent in background by the browser, and when the image is loaded in memory, the callback defined at step 2 is called. We create a pattern object inside, from the loaded image:
// callback called asynchronously, after the src attribute of imageObj is set
imageObj.onload = function(){
// We enter here when the image is loaded, we create a pattern object.
// It is good practice to set this as a global variable, easier to share
pattern1 = ctx.createPattern(imageObj, "repeat");
};
5- Inside the callback function (or inside a function called from inside the callback) ,we can finally draw:
// callback called asynchronously, after the src attribute of imageObj is set
imageObj.onload = function(){
pattern1 = ctx.createPattern(imageObj, "repeat");
// Draw a textured rectangle
ctx.fillStyle = pattern1;
ctx.fillRect(10, 10, 500, 800);
};
Examples
Examples
Example #1: draw two rectangles with a pattern (one filled, one stroked)
Example #1: draw two rectangles with a pattern (one filled, one stroked)
Here we have two rectangles drawn using a pattern (an image that can be repeated along the X and Y axis). The first is a filled rectangle while the second is "stroked" with a lineWidth of 20 pixels:
JavaScript source code:
var canvas, ctx, pattern1;
function init() {
canvas = document.querySelector('#myCanvas');
ctx = canvas.getContext('2d');
// We need 1) to create an empty image object, 2) to set a callback function
// that will be called when the image is fully loaded, 3) to create a
// pattern object, 4) to set the fillStyle or the strokeStyle property of
// the context with this pattern, 5) to draw something
// WE CANNOT DRAW UNTIL THE IMAGE IS FULLY LOADED -> draw from inside the
// onload callback only !
// 1 - Allocate an image
var imageObj = new Image();
// 2 - callback called asynchronously, after the src attribute of imageObj
// is set
imageObj.onload = function(){
// We enter here only when the image has been loaded by the browser
// 4 - Pattern creation using the image object
// Instead of "repeat", try different values : repeat-x, repeat-y,
// or no-repeat, You may draw larger shapes in order to see
// different results
// It is good practice to leave this as a global variable if it
// will be reused by other functions
pattern1 = ctx.createPattern(imageObj, "repeat");
// 5 - Draw things. Here a textured rectangle
ctx.fillStyle = pattern1;
ctx.fillRect(10, 10, 200, 200);
// ... And a wireframe one
ctx.lineWidth=20;
ctx.strokeStyle=pattern1;
ctx.strokeRect(230, 20, 150, 100);
};
// 3 - Send the request to load the image
// Setting the src attribute will tell the browser to send an asynchronous
// request.
// When the browser gets an answer, the callback above will be called
imageObj.src = "https://mainline.i3s.unice.fr/mooc/pattern1.jpg";
}
Example 2: the repeatability of a pattern
Example 2: the repeatability of a pattern
To "better" see the repeatability of the pattern, here is the same example with a 1000x1000 pixel wide canvas:
You can change the way the pattern is repeated by modifying the second parameter of this method:
pattern1 = ctx.createPattern(imageObj, "repeat");
Please try: repeat-x, repeat-y or no-repeat as acceptable values. Just change this line in the online example and you will see live results.
Page updated
Google Sites
Report abuse