Draw a images in Html Canvas in MVC

test.cshtml
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {      
        $.ajax({
            url: "test/SearchImage",
            contentType: 'application/json',
            dataType: "json",
            type: "get",
            success: function (data) {              
                var canvas = document.getElementById('myCanvas');
                var context = canvas.getContext('2d');
                var imageObj = new Image();
                imageObj.onload = function ()
                {
                    context.drawImage(imageObj, 0, 0);
                };
                imageObj.src = "data:image/tif;base64," + data.base64image;
                //$("#img_1").attr("src", "data:image/tif;base64," + data.base64image);              
            }
        })
    });
    </script>

    <div class="left">    
    <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </div>

TestController.cs
public ActionResult SearchImage()
        {
            var path = "E:\\Baskaran/Sample/Sample/images/img1.png";
            FileStream stream = new FileStream(path, FileMode.Open, FileAccess.Read);
            byte[] data = new byte[(int)stream.Length];
            stream.Read(data, 0, data.Length);
            return Json(new { base64image = Convert.ToBase64String(data) }, JsonRequestBehavior.AllowGet);
        }