search

gliffy / canvas2svg

Translates HTML5 Canvas draw commands to SVG
MIT License
691 stars 157 forks source link

Cannot export to svg #79

Open iansquenet opened 4 years ago

iansquenet commented 4 years ago

Here's my code that I need to export to svg:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.stroke();
ctx.fill('evenodd')

let region = new Path2D();

var h1 = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#7AD7F0";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.rotate(10 * Math.PI / 360);
ctx.arc(41,288,55,25,3);
ctx.stroke();

var h2 = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#7AD7F0";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.rotate(0 * Math.PI / 360);
ctx.arc(151,278,55,25,3);
ctx.stroke();
ctx.closePath();

var h3 = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#7AD7F0";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.rotate(15 * Math.PI / 360);
ctx.arc(293,232,55,25,3);
ctx.stroke();
ctx.closePath();

var h4 = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#7AD7F0";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.rotate(-8 * Math.PI / 360);
ctx.arc(385,240,55,25,3);
ctx.stroke();

var h5 = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#7AD7F0";
ctx.lineWidth = 30;
ctx.beginPath();
ctx.rotate(-5 * Math.PI / 360);
ctx.arc(485,245,55,25,3);
ctx.stroke();
ctx.closePath();

var h6 = document.getElementById("myCanvas6");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rotate(-12 * Math.PI / 360);
ctx.rect(0, 349, 550, 0);
ctx.stroke();
ctx.closePath();

var paat = document.getElementById("myCanvas7");
var ctx = c.getContext("2d");
ctx.fillStyle="#654321";
ctx.translate(40, 60);
ctx.beginPath();
ctx.moveTo(350,150);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.lineTo(50,150);
ctx.lineTo(120,150);
ctx.bezierCurveTo(
  120, 220, 
  220, 220, 
  220, 150
);
ctx.fill();
ctx.closePath();

var h8 = document.getElementById("myCanvas8");
var ctx = c.getContext("2d");
ctx.strokeStyle="#101";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(170, 130);
ctx.lineTo(170, 205);
ctx.stroke();
ctx.closePath();

var h9 = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
ctx.strokeStyle="#101";
ctx.lineWidth = 4;
ctx.translate(145, -120);
ctx.beginPath();
ctx.rotate(160 * Math.PI / 360);
ctx.arc(130,0,120,25,13);
ctx.stroke();
ctx.closePath();

var h10 = document.getElementById("myCanvas10");
var ctx = c.getContext("2d");
ctx.strokeStyle="#101";
ctx.lineWidth = 4;
ctx.translate(280, -180);
ctx.beginPath();
ctx.rotate(280 * Math.PI / 360);
ctx.arc(125,23,130,55,18);
ctx.stroke();
ctx.translate(83, 5);
ctx.moveTo(165, -35);
ctx.lineTo(125, -85);
ctx.stroke();
ctx.closePath();

var h11 = document.getElementById("myCanvas11");
var ctx = c.getContext("2d");
ctx.strokeStyle="#101";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.rotate(90 * Math.PI / 360);
ctx.arc(-45,-55,120,55,18);
ctx.stroke();
ctx.closePath();

var bob = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(43, -295);
ctx.rotate(910 * Math.PI / 360);
ctx.beginPath();
ctx.arc(60,40,13,0,10);
ctx.stroke();

var bobsilm1 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(60,35,4,0,10);
ctx.stroke();

var bobsilm2 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(59,36,1,0,10);
ctx.fillStyle = "#101";
ctx.fill();
ctx.stroke();

var bobkeha = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(60, 54);
ctx.lineTo(60, 80);
ctx.stroke();

var bobkehajalg1 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.moveTo(60, 80);
ctx.lineTo(50, 100);
ctx.stroke();

var bobkehajalg2 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(60, 80);
ctx.lineTo(70, 100);
ctx.stroke();

var bobkehakasi1 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(60, 60);
ctx.lineTo(19, 60);
ctx.stroke();

var bobkehakasi2 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(60, 60);
ctx.lineTo(70, 80);
ctx.stroke();

var bobsuu = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(55,45,2,0,3);
ctx.stroke();

var ruupur = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(10, 32);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 35);
ctx.moveTo(0, 0);
ctx.lineTo(25, 3);
ctx.moveTo(25, 3);
ctx.lineTo(37, 11);
ctx.moveTo(0, 35);
ctx.lineTo(37, 11);
ctx.stroke();

var tutt1 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.rotate(280 * Math.PI / 360);
ctx.beginPath();
ctx.arc(-51,-27,12,0,1);
ctx.stroke();

var tutt2 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.rotate(50 * Math.PI / 360);
ctx.translate(8, 8);
ctx.beginPath();
ctx.arc(-71,-15,12,0,1);
ctx.stroke();

var tutt3 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.rotate(50 * Math.PI / 360);
ctx.translate(-5, 10);
ctx.beginPath();
ctx.arc(-71,0,12,0,1);
ctx.stroke();

var paadinina = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.rotate(-190 * Math.PI / 360);
ctx.beginPath();
ctx.arc(31,-42,50,0,1);
ctx.stroke();

var heli1 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(-5, 35);
ctx.rotate(-50 * Math.PI / 360);
ctx.beginPath();
ctx.arc(18,-18,20,0,1);
ctx.arc(15,8,15,0,1);
ctx.stroke();

var heli2 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(-15, 37);
ctx.beginPath();
ctx.arc(18,-18,20,0,1);
ctx.arc(15,8,15,0,1);
ctx.stroke();

var heli3 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(25, -28);
ctx.beginPath();
ctx.arc(18,-23,20,0,1);
ctx.arc(15,8,15,0,1);
ctx.stroke();

var heli4 = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.translate(-15, 37);
ctx.beginPath();
ctx.arc(18,-18,20,0,1);
ctx.arc(15,8,15,0,1);
ctx.stroke();
iansquenet commented 4 years ago

image The final result.