Question 42399 in Html Question posted in
Some basic documentation can be found here.

How to edit special place on <Canvas/> – Html

I want to show an image to the user and the user can add something on the part of the image that I assign for it. Like this example (The user can apply his favorite design on a dress!)

I want you to show me a library or a way to add such a possibility to my project.

I clicked inspect and saw two canvas tags inside the html tags. But I did not understand what is the matter?

Tags:

2

Answers


  1. 0

    Canvas not support editor inside it natural, but the good trick is using input or textarea at the position that user clicked.

    You can use this library to save your time. The lightweight and easy to use.
    Add a layer for text and you can manage the text’s style or behavior.

    Good luck

    Login or Signup to reply.
  2. 0

    The question is too general, if your site is using a CMS like WordPress there are plugins for that, but if you’re building this from scratch, there are frameworks for adding objects to an HTML canvas, similar to those used in custom t-shirt printing websites, you can use JavaScript libraries like Fabric.js or Konva.js. These libraries provide a simple and powerful API to work with the HTML canvas element, allowing you to create interactive graphics applications.

    Here is a runnable example for you:

    // Initialize the canvas and set background
const canvas = new fabric.Canvas('mycanvas');
canvas.backgroundColor = '#fff';

// Load image on canvas
const imageUpload = document.getElementById('imageUpload');
imageUpload.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (f) => {
    const data = f.target.result;
    fabric.Image.fromURL(data, (img) => {
      img.set({
        left: 10,
        top: 10,
        angle: 0,
        cornersize: 10,
      });
      canvas.add(img);
      canvas.renderAll();
    });
  };
  reader.readAsDataURL(file);
});

// Enable object manipulation (scaling, rotating, moving)
canvas.on('object:moving', (options) => {
  options.target.setCoords();
  canvas.renderAll();
});

canvas.on('object:scaling', (options) => {
  options.target.setCoords();
  canvas.renderAll();
});

canvas.on('object:rotating', (options) => {
  options.target.setCoords();
  canvas.renderAll();
});
    canvas {
  border: 1px solid black;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom T-shirt Design</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
</head>

<body>
  <input type="file" id="imageUpload">
  <canvas width="500" id="mycanvas" height="400"></canvas>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search