Resolved issue 519

src/utils/canvas.js

@@ -15,8 +15,14 @@ export function startDrawing(
  canvas.width = window.innerWidth * 0.9;
 }
 
-export function handleDrawing(canvas, color, lineThickness, bgColor, brushStyle) {
- const ctx = canvas.getContext('2d');
+export function handleDrawing(
+ canvas,
+ color,
+ lineThickness,
+ bgColor,
+ brushStyle
+) {
+ const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth * 0.8;
 
  canvas.height = window.innerHeight * 0.6;
@@ -80,26 +86,26 @@ export function handleDrawing(canvas, color, lineThickness, bgColor, brushStyle)
  }
 
  // Add event listeners for mouse interactions
- canvas.addEventListener('mousedown', startDrawing);
- canvas.addEventListener('mouseup', stopDrawing);
- canvas.addEventListener('mousemove', draw);
- canvas.addEventListener('mouseleave', stopDrawing); // Stop drawing if the mouse leaves the canvas
+ canvas.addEventListener("mousedown", startDrawing);
+ canvas.addEventListener("mouseup", stopDrawing);
+ canvas.addEventListener("mousemove", draw);
+ canvas.addEventListener("mouseleave", stopDrawing); // Stop drawing if the mouse leaves the canvas
 
  // Add touch event listeners for mobile devices
- canvas.addEventListener('touchstart', (event) => {
+ canvas.addEventListener("touchstart", (event) => {
  event.preventDefault();
  startDrawing(event);
  });
 
- canvas.addEventListener('touchend', (event) => {
+ canvas.addEventListener("touchend", (event) => {
  event.preventDefault();
  stopDrawing();
  });
- canvas.addEventListener('touchcancel', (event) => {
+ canvas.addEventListener("touchcancel", (event) => {
  event.preventDefault();
  stopDrawing();
  });
- canvas.addEventListener('touchmove', (event) => {
+ canvas.addEventListener("touchmove", (event) => {
  event.preventDefault();
  draw(event);
  });
@@ -147,20 +153,58 @@ export const convertToPDF = (canvas) => {
 
 // Function to handle converting it into SVG format
 export const convertToSVG = (canvas) => {
- const context2D = canvas.getContext("2d");
- const options = {
- width: canvas.width,
- height: canvas.height,
- ctx: context2D,
- };
- const ctx = new Context(options);
- const svgContent = ctx.getSerializedSvg();
- const blob = new Blob([svgContent], { type: "image/svg+xml" });
+ // Ensure canvas is not null
+ if (!canvas) {
+ console.error("Canvas is not defined.");
+ return;
+ }
 
+ const canvasWidth = canvas.width;
+ const canvasHeight = canvas.height;
+
+ // Create SVG namespace
+ const svgNS = "http://www.w3.org/2000/svg";
+
+ // Create SVG element
+ const svg = document.createElementNS(svgNS, "svg");
+ svg.setAttribute("width", canvasWidth);
+ svg.setAttribute("height", canvasHeight);
+ svg.setAttribute("viewBox", `0 0 ${canvasWidth} ${canvasHeight}`);
+ svg.setAttribute("xmlns", svgNS);
+
+ // Create an image element and set its attributes
+ const image = document.createElementNS(svgNS, "image");
+ image.setAttributeNS(
+ "http://www.w3.org/1999/xlink",
+ "href",
+ canvas.toDataURL("image/png")
+ );
+ image.setAttribute("width", canvasWidth);
+ image.setAttribute("height", canvasHeight);
+
+ // Center the image within the SVG viewBox
+ const svgWidth = parseInt(svg.getAttribute("width"), 10);
+ const svgHeight = parseInt(svg.getAttribute("height"), 10);
+
+ // Calculate offsets
+ const xOffset = (svgWidth - canvasWidth) / 2;
+ const yOffset = (svgHeight - canvasHeight) / 2;
+
+ // Apply offsets to center the image
+ image.setAttribute("x", xOffset);
+ image.setAttribute("y", yOffset);
+
+ svg.appendChild(image);
+
+ // Serialize SVG to string
+ const serializer = new XMLSerializer();
+ const svgString = serializer.serializeToString(svg);
+
+ // Create a blob from the SVG string and trigger download
+ const blob = new Blob([svgString], { type: "image/svg+xml" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "image.svg";
-
  link.click();
 };
 
@@ -182,13 +226,12 @@ function setBrushStyle(ctx, brushStyle) {
  ctx.setLineDash([2, 20]);
  ctx.globalAlpha = 1.0;
  break;
- case "dashed":
- {
- const dotSpacing = 20;
- ctx.setLineDash([dotSpacing / 2, dotSpacing]);
- ctx.globalAlpha = 1.0;
- break;
- }
+ case "dashed": {
+ const dotSpacing = 20;
+ ctx.setLineDash([dotSpacing / 2, dotSpacing]);
+ ctx.globalAlpha = 1.0;
+ break;
+ }
  case "faded":
  ctx.setLineDash([]);
  ctx.globalAlpha = 0.01;
@@ -220,10 +263,8 @@ export function increaseHeight(canvas, bgColor, thickness, color, brushStyle) {
  // Redraw the portion of the drawing that fits in the new canvas size
  ctx.putImageData(imageData, 0, 0);
 
-
  // Update drawHistory to fit within new height
  drawHistory = histArray.filter((point) => point.y <= newHeight);
-
 }
 
 export function decreaseHeight(canvas, bgColor, thickness, color, brushStyle) {
@@ -250,24 +291,30 @@ export function decreaseHeight(canvas, bgColor, thickness, color, brushStyle) {
 
  // Update drawHistory to fit within new height
  drawHistory = histArray.filter((point) => point.y <= newHeight);
-
 }
 
-export function changeAspect(canvas, bgColor, thickness, color, brushStyle, hnum, wnum) {
-
+export function changeAspect(
+ canvas,
+ bgColor,
+ thickness,
+ color,
+ brushStyle,
+ hnum,
+ wnum
+) {
  const ctx = canvas.getContext("2d");
  const histArray = [...drawHistory];
  let newHeight, newWidth;
 
  // Set new height
- if (hnum == 100 && wnum == 100) {//default case 
+ if (hnum == 100 && wnum == 100) {
+ //default case
  newWidth = window.innerWidth * 0.8;
  newHeight = window.innerHeight * 0.6;
- }
- else {
+ } else {
  //adjust wnum hnums of various options to adjust the size
- newWidth = window.innerWidth * wnum / 100;
- newHeight = window.innerWidth * hnum / 100;
+ newWidth = (window.innerWidth * wnum) / 100;
+ newHeight = (window.innerWidth * hnum) / 100;
  }
 
  // Save the current drawing and clear the canvas
@@ -286,8 +333,13 @@ export function changeAspect(canvas, bgColor, thickness, color, brushStyle, hnum
  handleUpdates(canvas, color, thickness, bgColor, brushStyle);
 }
 
-export function handleUpdates(canvas, color, lineThickness, bgColor, brushStyle) {
-
+export function handleUpdates(
+ canvas,
+ color,
+ lineThickness,
+ bgColor,
+ brushStyle
+) {
  const ctx = canvas.getContext("2d");
  ctx.lineWidth = lineThickness;
  ctx.strokeStyle = `${color}`;