matefs/index.html

## index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js" integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.tailwindcss.com"></script>

 <body>
  <h1 class="text-4xl">
   Minha assinatura digital
  </h1>

  <div>
  <canvas id="myCanvas" width="600" height="200"></canvas>


  </div>


<div id="form">

<input type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-72	block text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 " placeholder="https://api-endpoint.com" required>


   <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="transformCanvasIntoImage()" placeholder="https://seu-endpoint-aqui.com">Enviar Imagem</button>

        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                onclick="sendConvertedImageToEndpoint()"> Apagar desenho</button>
    </div>


</body>
</html>

## minha-assinatura-digital.markdown

      
    Raw
  

              minha-assinatura-digital.markdown
            
          
    Minha assinatura digital

A Pen by Mateus Schverz on CodePen.
License.

  
## script.js
		// Obtenha o elemento do canvas
		var canvas = document.getElementById("myCanvas");

function addContextAndEvents() {

		// Obtenha o contexto 2D do canvas
		var ctx = canvas.getContext("2d");

		// Defina a cor de desenho padrão
		ctx.strokeStyle = "black";

		// Defina a largura da linha padrão
		ctx.lineWidth = 5;

		// Variáveis para armazenar a posição anterior do mouse
		var lastX, lastY;

		// Flag para indicar se o mouse está pressionado
		var isMouseDown = false;

		// Event listener para quando o mouse é pressionado
		canvas.addEventListener("mousedown", function(e) {
			// Obtenha as coordenadas do mouse
			lastX = e.clientX - canvas.offsetLeft;
			lastY = e.clientY - canvas.offsetTop;

			// Comece um novo caminho	// Defina que o mouse está pressionado
		isMouseDown = true;
	});

	// Event listener para quando o mouse é movido
	canvas.addEventListener("mousemove", function(e) {
		// Verifique se o mouse está pressionado
		if (isMouseDown) {
			// Obtenha as coordenadas do mouse
			var x = e.clientX - canvas.offsetLeft;
			var y = e.clientY - canvas.offsetTop;

			// Desenhe uma linha do ponto anterior para o ponto atual
			ctx.moveTo(lastX, lastY);
			ctx.lineTo(x-0.5, y+1);
      ctx.lineCap = "round";
			ctx.stroke();

			// Armazene as novas coordenadas do mouse
			lastX = x;
			lastY = y;
		}
	});

	// Event listener para quando o mouse é solto
	canvas.addEventListener("mouseup", function() {
		// Defina que o mouse não está pressionado
		isMouseDown = false;
	});

	// Event listener para quando o mouse sai do canvas
	canvas.addEventListener("mouseout", function() {
		// Defina que o mouse não está pressionado
		isMouseDown = false;
	});
}

addContextAndEvents()


function transformCanvasIntoImage() {
var dataURL = canvas.toDataURL();
 console.log(dataURL)
}


function sendConvertedImageToEndpoint(){
  transformCanvasIntoImage();
  axios.get('https://mateus.requestcatcher.com')
  .then( (e) => console.log(e))
}


## style.css

		canvas {
			border: 1px solid black;
       background-color:transparent;
		}

    div{
      display:flex;
      align-content:center;
      justify-content:center;
    }

    body{
      text-align:center;
    }
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js" integrity="sha512-nnNHpffPSgINrsR8ZAIgFUIMexORL5tPwsfktOTxVYSv+AUAILuFYWES8IHl+hhIhpFGlKvWFiz9ZEusrPcSBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdn.tailwindcss.com"></script>

	<body>
	<h1 class="text-4xl">
	Minha assinatura digital
	</h1>

	<div>
	<canvas id="myCanvas" width="600" height="200"></canvas>


	</div>


	<div id="form">

	<input type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-72 block text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 " placeholder="https://api-endpoint.com" required>



	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="transformCanvasIntoImage()" placeholder="https://seu-endpoint-aqui.com">Enviar Imagem</button>

	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
	onclick="sendConvertedImageToEndpoint()"> Apagar desenho</button>
	</div>



	</body>
	</html>
	// Obtenha o elemento do canvas
	var canvas = document.getElementById("myCanvas");

	function addContextAndEvents() {

	// Obtenha o contexto 2D do canvas
	var ctx = canvas.getContext("2d");

	// Defina a cor de desenho padrão
	ctx.strokeStyle = "black";

	// Defina a largura da linha padrão
	ctx.lineWidth = 5;

	// Variáveis para armazenar a posição anterior do mouse
	var lastX, lastY;

	// Flag para indicar se o mouse está pressionado
	var isMouseDown = false;

	// Event listener para quando o mouse é pressionado
	canvas.addEventListener("mousedown", function(e) {
	// Obtenha as coordenadas do mouse
	lastX = e.clientX - canvas.offsetLeft;
	lastY = e.clientY - canvas.offsetTop;

	// Comece um novo caminho // Defina que o mouse está pressionado
	isMouseDown = true;
	});

	// Event listener para quando o mouse é movido
	canvas.addEventListener("mousemove", function(e) {
	// Verifique se o mouse está pressionado
	if (isMouseDown) {
	// Obtenha as coordenadas do mouse
	var x = e.clientX - canvas.offsetLeft;
	var y = e.clientY - canvas.offsetTop;

	// Desenhe uma linha do ponto anterior para o ponto atual
	ctx.moveTo(lastX, lastY);
	ctx.lineTo(x-0.5, y+1);
	ctx.lineCap = "round";
	ctx.stroke();

	// Armazene as novas coordenadas do mouse
	lastX = x;
	lastY = y;
	}
	});

	// Event listener para quando o mouse é solto
	canvas.addEventListener("mouseup", function() {
	// Defina que o mouse não está pressionado
	isMouseDown = false;
	});

	// Event listener para quando o mouse sai do canvas
	canvas.addEventListener("mouseout", function() {
	// Defina que o mouse não está pressionado
	isMouseDown = false;
	});
	}

	addContextAndEvents()




	function transformCanvasIntoImage() {
	var dataURL = canvas.toDataURL();
	console.log(dataURL)
	}


	function sendConvertedImageToEndpoint(){
	transformCanvasIntoImage();
	axios.get('https://mateus.requestcatcher.com')
	.then( (e) => console.log(e))
	}

	canvas {
	border: 1px solid black;
	background-color:transparent;
	}

	div{
	display:flex;
	align-content:center;
	justify-content:center;
	}

	body{
	text-align:center;
	}