Scribd
Upload
13 views

Crop An Image: Draw An Image With Specified Height and Width

The document discusses several methods for drawing and manipulating images on an HTML5 canvas: 1. It shows how to draw an image on the canvas by specifying its height, width, and source location. 2. It demonstrates how to crop an image by drawing only a specific portion of it defined by x/y coordinates and dimensions. 3. It provides examples of how to modify the entire canvas context through translations, rotations, scaling, and shearing to manipulate where and how images are drawn.

Uploaded by

SACH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

Crop An Image: Draw An Image With Specified Height and Width

The document discusses several methods for drawing and manipulating images on an HTML5 canvas: 1. It shows how to draw an image on the canvas by specifying its height, width, and source location. 2. It demonstrates how to crop an image by drawing only a specific portion of it defined by x/y coordinates and dimensions. 3. It provides examples of how to modify the entire canvas context through translations, rotations, scaling, and shearing to manipulate where and how images are drawn.

Uploaded by

SACH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Draw an Image with specified Height and width

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = "w.jpg";
</script>

Crop an Image
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);
The sx, sy, sw and sh parameters declare from where (sx,sy) in the image
the rectangle starts, and the width (sw) and height (sh) of the rectangle.

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
// draw cropped image
var sourceX = 0;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = 150;
var destHeight =150;
var destX = 100;
var destY = 100;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight,


destX, destY, destWidth, destHeight);
};
imageObj.src = 'w.jpg';
</script>

Assignment 1:
context.font = '30pt Calibri';
context.font = '60pt Calibri';
context.textAlign = 'center';
context.lineWidth = 3;
// textBaseline aligns text vertically
// stroke color
relative to font style
context.strokeStyle = 'blue';
context.textBaseline = 'middle';
context.strokeText('Hello World!', x,
context.fillStyle = 'blue';
y);
context.fillText('Hello World!', x, y);
</script>
Translation: Move the entire image to a particular x and y location

context.fillStyle = "#ff0000";
context.fillRect(10,10, 100, 100);

context.translate(100, 100);

context.fillStyle = "#0000ff";
context.fillRect(10,10, 100, 100);

scale: enlarge the image by some factor:


use context.scale(2,2) in previous program

Rotate:

rotate around 0,0 on the canvas

context.rotate(radians);

Always use radians not degree;

context.rotate( (Math.PI / 180) * 25);

shear

//rotate 25 degrees

You might also like