'How do I get the code in jsfiddle to work in my Visual Studio Code?

const canvasEle = document.getElementById('drawing-container');
const canvasPad = document.getElementById('pad');
const toolbar = document.getElementById('toolbar');
const context = canvasEle.getContext('2d');
const padContext = canvasPad.getContext('2d');

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;

canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;

let startPosition = {
  x: 0,
  y: 0
};
let lineCoordinates = {
  x: 0,
  y: 0
};
let isDrawStart = false;

const getClientOffset = (event) => {
  const {
    pageX,
    pageY
  } = event.touches ? event.touches[0] : event;
  const x = pageX - canvasPad.offsetLeft;
  const y = pageY - canvasPad.offsetTop;

  return {
    x,
    y
  }
}

toolbar.addEventListener('click', e => {
    if (e.target.id === 'clear') {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
});

toolbar.addEventListener('change', e => {
    if(e.target.id === 'stroke') {
        ctx.strokeStyle = e.target.value;
    }

    if(e.target.id === 'lineWidth') {
        lineWidth = e.target.value;
    }
    
});

const drawLine = (ctx) => {
  if (!isDrawStart) {
    return;
  }
  ctx.beginPath();
  ctx.moveTo(startPosition.x, startPosition.y);
  ctx.lineTo(lineCoordinates.x, lineCoordinates.y);
  ctx.stroke();
}

const mouseDownListener = (event) => {
  startPosition = getClientOffset(event);
  isDrawStart = true;
}

const mouseMoveListener = (event) => {
  if (!isDrawStart) return;

  lineCoordinates = getClientOffset(event);
  clearCanvas(padContext);
  drawLine(padContext);
}

const mouseupListener = (event) => {
  clearCanvas(padContext);
  drawLine(context);
  isDrawStart = false;
}

const clearCanvas = (ctx) => {
  ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
}

canvasPad.addEventListener('mousedown', mouseDownListener);
canvasPad.addEventListener('mousemove', mouseMoveListener);
canvasPad.addEventListener('mouseup', mouseupListener);

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    color: white;
}

h1 {
    background: #7F7FD5;
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  
  .cnv-wrapper {
    height: 100%;
    display: flex;
  }
  
  .pad {
    height: 100%;
    display: flex;
    border: 4px solid #333;
  }

  .container {
    height: 100%;
    display: flex;
}

#toolbar {
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 70px;
    background-color: #202020;
}

#toolbar * {
    margin-bottom: 6px;
}

#toolbar label {
    font-size: 12px;
}

#toolbar input {
    width: 100%;
}

#toolbar button {
    background-color: #1565c0;
    border: none;
    border-radius: 4px;
    color:white;
    padding: 2px;
}

<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content = "IE = edge">
            <meta name = "viewport" content = "width = device - width, initial - scale = 0.1">
            <link rel = "stylesheet" href = "styles.css">
            <title> Pipe Illustrator </title>
        </head>

        <body>
            <section class  = "container">
                <div id = "toolbar">
                    <h1>Draw.</h1>
                    <label for="stroke">Stroke</label>
                    <input id="stroke" name='stroke' type="color">
                    <label for="lineWidth">Line Width</label>
                    <input id="lineWidth" name='lineWidth' type="number" value="5">
                    <button id="clear">Clear</button>
                </div>
                <div class = "drawing-container">
                    <canvas id = "drawing-container"></canvas>
                </div>
                <div class = "cnv-wrapper">
                    <canvas id = "cnv-wrapper"></canvas>
                </div>
            </section>
            <script src = "./index.js"></script>
        </body>
</html>

The project is to make a simple line drawer which makes allows me to draw fixed straight lines without the previous line being removed. The code written below is exactly what I need and was provided by another user from a question I asked previously about making it as my code wouldn't allow for the previous line to remain when drawing a new one.

This is the code below which is in jsfiddle, when I copy and paste it into my Visual studio code, I don't get the same output as I would in jsfiddle, the canvas doesn't appear nor does it allow anything to be drawn. Am I missing something ?

Right so this is the code i have written in VSC. It isn't entirely what was in the jsfiddle, i tried to integrate some other functions from another paint project i did. I was trying to add a toolbar for line colour and width. I think the way i have written it is contradicting it all got quite messy and was quite a fail. These are projects im doing to learn code as i am still a beginner to coding. Thank you for your help and input.

const canvasEle = document.querySelector('.draw-container');
const canvasPad = document.querySelector('.pad');
const context = canvasEle.getContext('2d');
const padContext = canvasPad.getContext('2d');
let startPosition = {
  x: 0,
  y: 0
};
let lineCoordinates = {
  x: 0,
  y: 0
};
let isDrawStart = false;

const getClientOffset = (event) => {
  const {
    pageX,
    pageY
  } = event.touches ? event.touches[0] : event;
  const x = pageX - canvasPad.offsetLeft;
  const y = pageY - canvasPad.offsetTop;

  return {
    x,
    y
  }
}

const drawLine = (ctx) => {
  if (!isDrawStart) {
    return;
  }
  ctx.beginPath();
  ctx.moveTo(startPosition.x, startPosition.y);
  ctx.lineTo(lineCoordinates.x, lineCoordinates.y);
  ctx.stroke();
}

const mouseDownListener = (event) => {
  startPosition = getClientOffset(event);
  isDrawStart = true;
}

const mouseMoveListener = (event) => {
  if (!isDrawStart) return;

  lineCoordinates = getClientOffset(event);
  clearCanvas(padContext);
  drawLine(padContext);
}

const mouseupListener = (event) => {
  clearCanvas(padContext);
  drawLine(context);
  isDrawStart = false;
}

const clearCanvas = (ctx) => {
  ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
}

canvasPad.addEventListener('mousedown', mouseDownListener);
canvasPad.addEventListener('mousemove', mouseMoveListener);
canvasPad.addEventListener('mouseup', mouseupListener);

body {
  background-color: #ccc;
}

.cnv-wrapper {
  position: relative;
}

.pad {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #333;
}

.draw-container {
  border: 1px solid #333;
}

<div class="cnv-wrapper">
  <canvas class="draw-container" width="500" height="500"></canvas>
  <canvas class="pad" width="500" height="500"></canvas>
</div>

Solution 1:^[1]

From comments where I advise:

You can't just copy and paste code [from fiddle] without also using the appropriate html tags. Your CSS needs to go in style tags. Your scripts need to go in script tags. The dom elements, e.g. the "canvas" needs to go in the body tag. Etc. ... You may also need to affix the appropriate "doctype" and you may need to trigger the scripts to run on document load.

As an example, I tried the pasted code using the above advice on my own computer and it worked.

I'll show the complete source and then followup with a runnable version here on SO. Note that the runnable version uses SO's utility for such and as such you won't see all the various tags I mentioned, but the functionality remains the same just as with the "fiddle".

Corrected "pasted" source showing all the relevant tags you need to create:

<!doctype html> <!-- Add appropriate doctype -->

<html>
<head>

<style>
/* Paste the CSS in a style tag */

body {
  background-color: #ccc;
}

.cnv-wrapper {
  position: relative;
}

.pad {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #333;
}

.draw-container {
  border: 1px solid #333;
}
</style>

</head>

<body> 

<div class="cnv-wrapper">
  <canvas class="draw-container" width="500" height="500"></canvas>
  <canvas class="pad" width="500" height="500"></canvas>
</div>

<script>
// Paste your init scripts into the onload event to ensure they get ran after the canvas is created

window.onload = function() {
    
    const canvasEle = document.querySelector('.draw-container');
    const canvasPad = document.querySelector('.pad');
    const context = canvasEle.getContext('2d');
    const padContext = canvasPad.getContext('2d');
    let startPosition = {
      x: 0,
      y: 0
    };
    let lineCoordinates = {
      x: 0,
      y: 0
    };
    let isDrawStart = false;

    const getClientOffset = (event) => {
      const {
        pageX,
        pageY
      } = event.touches ? event.touches[0] : event;
      const x = pageX - canvasPad.offsetLeft;
      const y = pageY - canvasPad.offsetTop;

      return {
        x,
        y
      }
    }

    const drawLine = (ctx) => {
      if (!isDrawStart) {
        return;
      }
      ctx.beginPath();
      ctx.moveTo(startPosition.x, startPosition.y);
      ctx.lineTo(lineCoordinates.x, lineCoordinates.y);
      ctx.stroke();
    }

    const mouseDownListener = (event) => {
      startPosition = getClientOffset(event);
      isDrawStart = true;
    }

    const mouseMoveListener = (event) => {
      if (!isDrawStart) return;

      lineCoordinates = getClientOffset(event);
      clearCanvas(padContext);
      drawLine(padContext);
    }

    const mouseupListener = (event) => {
      clearCanvas(padContext);
      drawLine(context);
      isDrawStart = false;
    }

    const clearCanvas = (ctx) => {
      ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
    }

    canvasPad.addEventListener('mousedown', mouseDownListener);
    canvasPad.addEventListener('mousemove', mouseMoveListener);
    canvasPad.addEventListener('mouseup', mouseupListener); 
}
</script>

</body>
</html>

Now on to demonstrating this code works now here on SO.

Note that SO's intepreter of code also (like "fiddle") doesn't need the tags mentioned that would be needed when you copy and paste into your own editor. Therefore I re-mention where the pasted code goes in code comments.

// Your scripts will go in a <script> tag

// Use an onload event handler to ensure they get ran after the canvas is created

window.onload = function() {
    const canvasEle = document.querySelector('.draw-container');
    const canvasPad = document.querySelector('.pad');
    const context = canvasEle.getContext('2d');
    const padContext = canvasPad.getContext('2d');
    let startPosition = {
      x: 0,
      y: 0
    };
    let lineCoordinates = {
      x: 0,
      y: 0
    };
    let isDrawStart = false;

    const getClientOffset = (event) => {
      const {
        pageX,
        pageY
      } = event.touches ? event.touches[0] : event;
      const x = pageX - canvasPad.offsetLeft;
      const y = pageY - canvasPad.offsetTop;

      return {
        x,
        y
      }
    }

    const drawLine = (ctx) => {
      if (!isDrawStart) {
        return;
      }
      ctx.beginPath();
      ctx.moveTo(startPosition.x, startPosition.y);
      ctx.lineTo(lineCoordinates.x, lineCoordinates.y);
      ctx.stroke();
    }

    const mouseDownListener = (event) => {
      startPosition = getClientOffset(event);
      isDrawStart = true;
    }

    const mouseMoveListener = (event) => {
      if (!isDrawStart) return;

      lineCoordinates = getClientOffset(event);
      clearCanvas(padContext);
      drawLine(padContext);
    }

    const mouseupListener = (event) => {
      clearCanvas(padContext);
      drawLine(context);
      isDrawStart = false;
    }

    const clearCanvas = (ctx) => {
      ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
    }

    canvasPad.addEventListener('mousedown', mouseDownListener);
    canvasPad.addEventListener('mousemove', mouseMoveListener);
    canvasPad.addEventListener('mouseup', mouseupListener); 
}

/* Your CSS would go in a <style> tag */

body {
  background-color: #ccc;
}

.cnv-wrapper {
  position: relative;
}

.pad {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #333;
}

.draw-container {
  border: 1px solid #333;
}

<!-- Your HTML would go in the <body> tag -->

<div class="cnv-wrapper">
  <canvas class="draw-container" width="500" height="500"></canvas>
  <canvas class="pad" width="500" height="500"></canvas>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	GetSet

'How do I get the code in jsfiddle to work in my Visual Studio Code?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]