Is it possible to show any part of image in img tag (with pixels) via JavaScript?

I would have a prepared big image (e.g. 32x320 pixels) and defined starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), and would want the script to show second (32x32 pixel) part of main image.

Is it possible to show any part of image in img tag (with pixels) via JavaScript?

I would have a prepared big image (e.g. 32x320 pixels) and defined starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), and would want the script to show second (32x32 pixel) part of main image.

• javascript
• image

• Possible duplicate of How can I display just a portion of an image in HTML/CSS? – user719662 Commented Jul 7, 2017 at 20:06
• While referenced question is about html/css, this was for JavaScript. – Alper Commented Jul 7, 2017 at 20:14
• are you aware that, since your question was implicitly about JavaScript DOM, and the DOM itself is just a programming backend for HTML/CSS, your question was about HTML/CSS itself? The accepted answer here point you to CSS for that very reason. You can't do JS DOM without taking account of HTML/CSS - even HTML5 canvas element mentioned in the other answer is just that - an HTML5 document element. – user719662 Commented Jul 7, 2017 at 20:40

2 Answers 2

You could use CSS properties for this and change them via JS. Set the image as a background for an element with your desired size and adjust its position with background-position so that the correct part of it is visible. Some people call it CSS sprites.

For the sake of giving you multiple options, you could always use an HTML5 canvas and redraw the image as necessary. You can find a nice tutorial about how to do this here : https://developer.mozilla/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images The CSS sprite method would be preferable nonetheless as IE doesn't support canvas yet.