Question

34

drawImage and resize to Canvas

rated 0 times [ 40] [ 6] / answers: 1 / hits: 75738 / 11 Years ago, sun, march 3, 2013, 12:00:00

I have an image which is 1836 x 3264 I want to drawImage() to canvas and resize to 739 x 1162.

After reading the documentation I thought this could be accomplished with the following:

ctx.drawImage(image, 0, 0, 739, 1162);

I have also tried:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

Both show only a small part of the full image instead of shrinking it down.

How do I pass through the values to resize from 1836 x 3264 -> 739 x 1162 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 11 Years ago tai · Accepted Answer

What you have looks correct, so you might double-check for a typo somewhere.

[additional thought: Is your image really 1836x3264 and not 3264x1836.]

Here is working code and a Fiddle: http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html>

<html>

<head>

<link rel=stylesheet type=text/css media=all href=css/reset.css /> <!-- reset css -->

<script type=text/javascript src=http://code.jquery.com/jquery.min.js></script>



<style>

    body{ background-color: ivory; }

    canvas{border:1px solid red;}

</style>



<script>

$(function(){



    var canvas=document.getElementById(canvas);

    var ctx=canvas.getContext(2d);



    img=new Image();

    img.onload=function(){

        canvas.width=400;

        canvas.height=300;

        ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300);

    }

    img.src=http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg;



}); // end $(function(){});

</script>



</head>



<body>

    <canvas id=canvas width=100 height=100></canvas>

</body>

</html>