Estoy delimitando una zona con canvas en una foto de un producto, y de momento me sale bien, puedo mover la zona del canvas con los inputs, pero no se por que el horizontal no me funciona, no hace nada. Si se os ocurre una forma más fina soy todo ojos.
$("#ancho").bind('keyup mouseup', function () {
var ancho = $("#ancho").val();
$("#c").css("width", ancho);
});
$("#alto").bind('keyup mouseup', function () {
var alto = $("#alto").val();
$("#c").css("height", alto);
});
$("#horizontal").bind('keyup mouseup', function () {
var horizontal = $("#horizontal").val();
$("#c").css("left", horizontal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas {
border: 1px dashed rgb(195 195 195);
margin: 10px 0px 0px 0px;
position: absolute;
right: 0px;
width: 150px;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
height: 150px;
}
</style>
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Ancho</label>
<input type="number" class="form-control" value="150" id="ancho">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Alto</label>
<input type="number" class="form-control" value="150" id="alto">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Horizontal</label>
<input type="number" class="form-control" value="50" id="horizontal">
</div>
</div>
</div>
<div class="center" style="text-align: center;>
<span style="position: relative">
<img src="https://www.sudeporte.com/13755-thickbox_default/sudadera-capucha-keya-100-negro.jpg" alt="" id="img_producto">
<canvas id="c" style="width: 152px; height: 176px;"></canvas>
</span>
</div>
style="text-align: center;>