не мгоу разобраться почему, вроде всё должно работать, функция doCanvas вызывается, и работает отдельно. а при уменьшении масштаба она не стирает старый рисунок
var img;
var tttScale = 1;
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
img = new Image();
var f = document.getElementById("uploadimage").files[0],
url = window.zURL || window.URL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0, img.width, img.height);
};
};
document.getElementById("uploadimage").addEventListener("change", draw, false)
function Move(a) {
switch (a) {
case 'plus':
if (tttScale < 1) {
tttScale = 1;
}
tttScale = tttScale + 0.05;
break;
case 'mines':
if (tttScale > 1) {
tttScale = 1;
}
tttScale = tttScale - 0.05;
break;
default:
tttScale = 1;
}
var ctx = document.getElementById('canvas').getContext('2d');
doCanvas();
ctx.scale(tttScale, tttScale);
ctx.drawImage(img, 0, 0, img.width, img.height);
// alert(tttScale);
}
function doCanvas() {
ctx.fillStyle = '#FF8F00';
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle = '#fff';
//alert("111");
};
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="doCanvas()">
<input type="file" name="img" id="uploadimage">
<a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a>
<a href="javascript:void(0)" onclick="Move('plus')">Plus</a>
</br>
<canvas id="canvas" width="500" height="500" ;></canvas>
<script src="config.js"></script>
</body>
</html>