How can I add an image to a canvas using a button?

Having trouble with my studies and looking to create a custom shirt website. Posted below is the beginner code I have:

If anyone knows how to upload an image onto a shirt canvas using a button, as well as change the shirt color with another button, please share your knowledge. Thank you in advance, and apologies for any language errors^^

<html>
<head>
<title>HTML5 Canvas example</title>
<script type="text/javascript">
  window.addEventListener('load', function () {
    var element = document.getElementById('myCanvas');
    if (!element || !element.getContext) {
      return;
    }

    var context = element.getContext('2d');
    if (!context || !context.drawImage) {
       return;
    }
    context.fillStyle   = '#CC5422'; // set canvas background color
    context.fillRect  (0,   0, 350, 350);  // now fill the canvas 

    // create amd draw the branding image for the qr-code
    var Shirt = new Image();
    Shirt.addEventListener('load', function () {
       context.drawImage(this, 35, 25, 275, 275);
    },false);
    Shirt.src = "men_shirt_front.png";
  },false);
</script>
</head>
<body>
<div style="padding:35px;">
<canvas id="myCanvas" width="350" height="350">
    Your browser does not support HTML5 Canvas element.
</canvas>
</div>
</body>
</html>

Answer №1

If you're eager to expand your knowledge, consider utilizing the script provided below:

FOR EFFICIENT FILE UPLOAD VIA UPLOAD-AT-CLICK

<script type="text/javascript>
var uploader = document.getElementById('uploader');
/**
* THE UPLOAD PROCESS
* This particular script employs the UploadAtClick library to facilitate file uploads to a designated webserver folder
* by means of a PHP script ("upload/upload.php")
* Visit project homepage for more info: http://code.google.com/p/upload-at-click/
*/
upclick(
{
element: uploader,
action: 'upload/upload.php',
onstart:
function(filename)
{
//alert('Initiating upload process for: '+filename);
},
oncomplete:
function(response_data) 
{
// Assess the upload Status
if (response_data != "FAIL") {                
// Render the image onto Canvas     
// The "response_data" variable holds the name of the image file provided by the PHP script
displayPicture("upload/" + response_data);
}
}
});

PHP SCRIPT FOR UPLOADING

<?php
$tmp_file_name = $_FILES['Filedata']['tmp_name'];
$ok = move_uploaded_file($tmp_file_name, $_FILES['Filedata']['name']);
// A message to be relayed to the 'oncomplete' function
echo $ok ? $_FILES['Filedata']['name'] : "FAIL"; 
?>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered: The middleware being used is not recognized as a function within the Reddit-clone application. This issue arises while fetching data from

I've been troubleshooting my Reddit-inspired app, and I'm struggling to overcome this issue. I've attempted solutions suggested in YouTube tutorials and followed the documentation for this specific issue. My app is built using Redux-Toolkit. ...

Click on the button to automatically scroll to a specific component inside the dialog

In my JSF/Primefaces application, I have a page with a long content that can be scrolled, along with a dialog also containing lengthy content that requires scrolling. The dialog includes a button and I am looking to scroll the dialog content to a specific ...

modify style when not valid and is touched

When I try to modify the style of an i tag based on the touched and invalid state of another field, only the input tag's style changes and not the i tag. Here's the CSS code I'm using: input.ng-touched.ng-invalid { border-color: red; } ...

There appears to be a malfunction in the socket rooms, as they are not operating

I have set up a code where sockets are being sent to the wrong person, and I am unable to figure out why. Whenever I update one user's status, it also updates the other user's status. Snippet of Code io.on('connection', function(socke ...

What is the procedure for submitting all checkbox values through Google Apps Script?

My web app created using Google Apps Script can generate a custom table of data for users to select for calculations. I use Google Sheets to populate the table with values and checkboxes, but note that the table size may vary depending on the user. <fo ...

I'm currently leveraging Vue.js and Python Flask for my backend development. I'm looking to establish some local variables. What is the best way to accomplish this?

Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout. <template> <div> <div class="glob ...

Error: Unable to access the toISOString property of an undefined object

https://i.sstatic.net/jtZnQ.png import './ExpenseItem.css'; function ExpenseItem(props){ return ( <div className="expense-item"> <div>{props.date.toISOString()}</div> <div className="expen ...

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Below is the code snippet in question: <% @groups.each do |group| %> <tr> <td id="groupid"><%= group.id %></td> <td><a href="#dialog" name="modal"><%= group.title %></a></td> </tr> &l ...

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with: .flex-container { display: flex; justify-content: center; padding: 5%; position: relative; } .box1 { position: absolute; bottom: 0; width: 100%; height: 100%; } <div class="flex-container"> ...

iFrame initially loads the page and subsequently reloads it continuously in a separate tab

Encountering a strange issue with IE11 regarding a series of links: <a href="page1.html" target="iframe_name">Page #1</a> <a href="page2.html" target="iframe_name">Page #2</a> <a href="page3.html" target="iframe_name">Page #3 ...

Unable to integrate third-party tools into your Vue JS project via CDN

Currently delving into Vue JS to enhance the interactivity of my django application, I am opting for the route of integrating Vue JS as components within my templates rather than going down the path of a Single Page Application (SPA). It's almost like ...

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

What is the proper way to store the output in a variable? Angular and XLSX

I am attempting to read an Excel file from an input using Angular and convert the data into an array of objects. Here is how my components are structured: import * as XLSX from 'xlsx'; import { Injectable } from '@angular/core'; @Injec ...

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

The elements within the "ng-repeat" directive are not appearing as expected

My application makes a get request using Angular's http service and then loops over the returned data to display an unordered list in the view. However, I am facing an issue where the data is available after the get request but is not being displayed ...

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

I am currently experimenting with Node.js, where I am attempting to stream files from the filesystem over HTTP. However, my experience on an OS X Lion machine has been hindered by a buggy Apache Bench (ab) app that prematurely aborts connections. This issu ...

Turn off the validation of individual JavaScript errors in Eclipse

Currently, I am exploring the use of Eclipse for JavaScript within the "Eclipse IDE for Java EE Developers" package. In my project, there is a heavy reliance on Bluebird, a promises implementation, resulting in several lines like: somePromise.catch(funct ...

Issue with loading a stylesheet from a GitHub raw URL

How are you feeling today? I appreciate your willingness to assist, although I realize this may seem like a trivial question. I am struggling to comprehend why things are not functioning as expected. Within my local directory, I have the following tree s ...

Incorporating HTML snippets into files using PHP

When attempting to insert an HTML line into the "userlist.php" file using PHP code, I encountered an issue: <?php $username = "pajlok"; $type = ".jpg"; $html = <<<EOD <div onclick="window.location.href = 'user/pajlok/'" styl ...