app.controller('uploadCtrl', function ($scope, $http,video,notify) { $scope.profesor=""; $scope.texto1=""; $scope.texto2=""; $scope.video = video; $scope.diapos = []; var canvas = document.getElementById('c'); var container = canvas.parentNode; var ctx = canvas.getContext('2d'); var dpr = window.devicePixelRatio || 1; var img = new Image(); var diapos = []; img.src="https://curso.especificosba.com.ar/diapo/EBA/1.png"; //Cargo la imagen inicial, a espera de informacion img.onload=function(){ //Cuando una imagen carga en mi obj imagen, quiero que se dibuje en canvas ctx.drawImage(img,0,0,canvas.width, canvas.height); } $scope.updateDiapos = function(d) { diapos = JSON.parse(d); parseMessage(diapos[0]); } function respondCanvas(){ canvas.setAttribute('width', container.offsetWidth); canvas.setAttribute('height', container.offsetWidth/4*3); } respondCanvas(); if (!String.prototype.format) { String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return ( typeof args[number] != 'undefined' ? args[number] : match ); }); }; } function parseMessage(msg){ if (msg==undefined) return; switch(msg.type){ case "draw": drawOnCanvas(msg.points,msg.color); break; case "clean": ctx.drawImage(img,0,0,canvas.width, canvas.height); break; case "diapo": img.src="https://curso.especificosba.com.ar/diapo/{0}/{1}.png".format(msg.PDF,msg.slide); break; } } function drawOnCanvas(points,color) { if(points.length==0) return; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for(var i=1; i