Adding a background to a cropped canvas area

Question

I'm attempting to work with Resizing and cropping script from Codrops

It's very good however if the image does not fill the cropping area the script fails and all the image turns black.

My thoughts are to maybe create a solid image first then apply the cropped image on top. But I'm struggling.

I'm guessing somewhere around here:

    var crop_canvas,
    left = $('.size_guide').offset().left - $container.offset().left,
    top =  $('.size_guide').offset().top - $container.offset().top,
    width = $('.size_guide').width(),
    height = $('.size_guide').height();

crop_canvas = document.createElement('canvas');


crop_canvas.width = width;
crop_canvas.height = height;



crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);

Any ideas on to how to go about this or try a different solution? Many thanks

Answer 1

Yes, they missed a bounds check when drawImaging the image_target.

You can do the bounds correction for them like this:

if(left<0){left=0;}
if(top<0){top=0;}
if(width>image_target.width){width=image_target.width;}
if(height>image_target.height){height=image_target.height;}