AngularJS列COL-MD尺寸

Question

我有3列：

<div class="col-md-2"> 
<!-- Stuff 1 --> 
</div> 

<div class="col-md-6"> 
    <canvas id="canvasBlocs" width="950" height="1700"></canvas> 
</div> 

<div class="col-md-4"> 
<!-- Stuff 3 --> 
</div> 

在我的画布，我有一个形象，但它不与柱配合（到大的右侧和左侧，如果我缩放/去变焦）。

我如何确保画布不会比列大？

我只想让画布与列完美配合。

[编辑]我的JS代码。图像现在在画布内“变大”。如何在画布中缩放图像的正确尺寸？

var canvas = document.getElementById('canvasBlocs'); 
    var context = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = ".img/myImage.png; 
    img.onload = function() { 
     var pattern = context.createPattern(img, "no-repeat"); 
     context.fillStyle = pattern; 
     context.fillRect(0, 0, canvas.width, canvas.height); 
    } 

[EDIT2]

帆布确定，但影像内大： http://hpics.li/3cf3e2c

当我dezoom： http://hpics.li/0a0230e

感谢您的帮助！

Answer 1

只要告诉canvas元素，以不扩大更宽，则父容器的宽度，它会按比例缩放：

#canvasBlocs { 
    max-width: 100%; 
} 

要呈现的图像在你的情况下，最好使用的drawImage方法：

img.onload = function() { 
    context.drawImage(img, 0, 0, img.width, img.height); 
}