Where to place canvas Rotate in this code

Question

I searched a lot, but unfortunately I did not find where the canvas Rotate function I could add in this code.

In html I have an input type ranger that I use to rotate the image.. The input type takes the value in degrees and saves in a variable called grausAtual I can no longer adapt this variable within ctx.Otate(20 * Math.PI / 180); and much also do not know where I would put this part inside the code below where generates an image...

  crop = function(){
    //Find the part of the image that is inside the crop box
    var crop_canvas,
        left = $('.overlay').offset().left- $container.offset().left,
        top =  $('.overlay').offset().top - $container.offset().top,
        width = $('.overlay').width(),
        height = $('.overlay').height();
		
		var TO_RADIANS = Math.PI/180; 
    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);
	
	var dataURL=crop_canvas.toDataURL("image/png");
	image_target.src=dataURL;
	orig_src.src=image_target.src;
	
	
	$(image_target).bind("load",function() {
		$(this).css({
			width:width,
			height:height
		}).unbind('load').parent().css({
			top:$('.overlay').offset().top- $('.crop-wrapper').offset().top,
			left:$('.overlay').offset().left- $('.crop-wrapper').offset().left
		})
	});
     
	sessionStorage.setItem('imgAtual', crop_canvas.toDataURL("image/png"));
	var url = $('#salvaEtapa').data('url');
	$.colorbox({iframe:true, href:url, width:"60%", height:"80%", opacity:"0.50", title:false});
	$("#escondido").css("visibility","hidden");
  }

Answer 1

perhaps so:

crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').rotate(grausAtual * Math.PI / 180);
crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);