This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Create links in HTML canvas
I have filled text in a html5 canvas using
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "yellow";
ctx.fillText("INDEX",325,105);
}}}
Now i want to hyperlink whatever text i have entered how do i do that? Thank you
Short of creating a system that parses the text for hyperlinks, measures its position and checks for clicks on it, you can't.
Related
This question already has answers here:
Textarea not selectable in Chrome
(3 answers)
Closed 1 year ago.
There are lots of non working answer on stackoverflow but I'm looking for a working one:
const textarea = document.getElementsByTagName("textarea")[0];
textarea.style.userSelect = 'none';
textarea.readOnly = true;
textarea.style.cursor = 'default';
textarea.setAttribute("unselectable", "on");
<textarea>
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
I want to disable text selection on this textarea in chrome (only) using pure javascript.
But for some reasons (perhaps a bug) this is not working!!
Not very sure if this is what you are looking for. I presume you don't want the text to be selected on chrome and it should work fine on other browsers
var isChrome = !!window.chrome;
if (isChrome) {
const textarea = document.getElementsByTagName("textarea")[0];
textarea.style.userSelect = 'none';
textarea.readOnly = true;
textarea.style.cursor = 'default';
textarea.setAttribute("unselectable", "on");
textarea.setAttribute("onselectstart", "return false;");
textarea.setAttribute("onmousedown", "return false;");
}
<textarea>
Some content
</textarea>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I started learning javascript after coding in java and c++ and I am trying to draw a rectangle. I can get a normal rectangle to draw If i just code normally in a script in the body but I wanna make my file look neat and have a function incase I need to call more rectangles in my program. I have googled around but I still can't figure out how to do this.
i have tried putting the function in the head section and my js file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PacMan</title>
<script scr="pac.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//function drawRect(ctx, startX, startY, width, height, color){
//ctx.beginPath();
// ctx.rect(startX,startY,width,height);
// ctx.fillStyle = color;
// ctx.closePath();
// }
</script>
</head>
<body>
<canvas id="canvas" width="1000" height="720"></canvas>
<script>
drawRect(ctx,10,10,10,10, "#FF0000");
// this works but i can not get the function to work
//var canvas = document.getElementById("canvas");
//var ctx = canvas.getContext("2d");
//ctx.beginPath();
// ctx.rect(900, 10, 50, 50);
// ctx.fillStyle = "#FF0000";
//ctx.fill();
// ctx.closePath();
</script>
</body>
</html>
here is the .js file i created to try to keep my functions in a nice neat order so they do not clutter my files
function drawRect(ctx,h1,h2,w1,w2, color){
//i tired at one point putting this into function
//var canvas = document.getElementById("myCanvas");
// var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
If I understood you correctly, you want to create a function that draws something and possibly be able to reuse that in other files?
Here's a working example to simulate a working function https://jsbin.com/puneseyuca/edit?html,js,output. You can also inspect the output area and check the DOM semantics.
There are a couple of things you should follow to make it work properly.
Put <script> just before </body>
<body>
<!-- DOM -->
// ...
<!-- Scripts -->
<script src="./path-to-your-js-file.js"></script>
</body>
Mostly you'll want to put your <script> files just before the ending body tag. Also, since you are not using any frameworks it would be good to be completely sure that the DOM is loaded, hence you could add this code:
document.addEventListener("DOMContentLoaded", function(event) {
// "DOM fully loaded and parsed"
// Insert your code here
});
This is important for the JS to be able to select elements from the DOM, otherwise they can be undefined.
Create a global variable, typically window.anything
⚠️ This should be avoided to avoid unexpected mutations and hence bugs
I do not endorse this approach, but that's how some libraries work by namespacing to the global window object. Otherwise, the variables set in 1 file are scoped to it i.e. cannot be accessed from outside.
So to do so you would declare a function and then save it to the global object i.e.
Inside e.g. duck.js
window.drawDuck = drawDuck
N.B. Be sure to check the order of your javascript files. A file declaring a global variable should come before the ones using it.
All said and done, I believe you can do what you intend to without global variables.
Hope I answered your question.
Happy Coding!
This question already has answers here:
How can I convert an HTML element to a canvas element?
(10 answers)
Closed 8 years ago.
I want to save screenshot of the current page ( full page with scroll) and save it as an image or pdf .
You can use html2canvas js library to take a screen shot and then use canvas in javascript to download/save.
HTML
<button id="save-img">Download</button>
JS/jQuery
$("#save-img").click(function () {
html2canvas(document.body, {
onrendered: function(canvas) {
document.location = canvas.toDataURL("image/png");
}
});
});
Or read this article if you want to achieve this in asp.net using DataVisualization.
Hope that helps.
I am using Html5 and Jquery.
I have paste image/text from clipboard into html canvas.
Is it possible to detect whether clipboard has text or image?
$(document).on('paste','[contenteditable]',function(e) {
e.preventDefault();
//Here is it possible to detect whether clipboard has text or image?
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
});
Thanks!
This is what I have on my page, it works for me:
if (e.clipboardData.files.length > 0) {
// Image
} else {
// Text
};
Also I see that this question was posted 6 years ago but hopefully it can help some other people.
This question already has answers here:
jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
(2 answers)
Scroll to an element with jQuery
(32 answers)
Closed 6 years ago.
It is possible to move to a certain position on a page using #elementId. How can I do the same thing using Javascript / Jquery. When a JS function is called, I want to scroll to the specific position on that page.
After much googling I found that you just need to do this:
location.hash = "elementId"
Another solution is scrollIntoView()
document.getElementById("elementID").scrollIntoView();
Here's an example function that I tested on today's New York Times front page using the browser console:
function scrollToElement(pageElement) {
var positionX = 0,
positionY = 0;
while(pageElement != null){
positionX += pageElement.offsetLeft;
positionY += pageElement.offsetTop;
pageElement = pageElement.offsetParent;
window.scrollTo(positionX, positionY);
}
}
var pageElement = document.getElementById("insideNYTimesHeader");
scrollToElement(pageElement);
you can use scrollTop to scroll up.
you can use this plugin too