Develop Reference

how to render smothly P5.js in hdpi screen?

Computer with hdpi screen are more and more common and I own one.
I'm building a webpage with a P5.js canvas inside it filling a div.
I have absolutely no problem till this point, but as I have an hdpi screen the number of pixels to render is tremendous and it's very hard to render smoothly.
what I would like to do: render a low-resolution canvas an stretching it to fill all the space. But I have no ideé how to achieve this or even if it's possible.
function setup() {
var canvasDiv = document.getElementById('myCanvas');
var divWidth = canvasDiv.getBoundingClientRect().width;
var divHeight = canvasDiv.getBoundingClientRect().height;
var sketchCanvas = createCanvas(divWidth,divHeight);
sketchCanvas.parent("myCanvas");
background(0)
}
function windowResized() {
var canvasDiv = document.getElementById('myCanvas');
var divWidth = canvasDiv.getBoundingClientRect().width;
var divHeight = canvasDiv.getBoundingClientRect().height;
resizeCanvas(divWidth, divHeight);
background(0)
}
function draw(){
}

Step one: Create an off-screen buffer using the createGraphics() function. More info can be found in the reference. Give it whatever low-res size you want.
Step two: Draw your scene to that off-screen buffer. Use its width and height to draw stuff to scale.
Step three: Draw the off-screen buffer to the screen, using the image() function, which takes parameters for the size to draw. Use the size of the canvas as the arguments. Again, more info can be found in the reference.
You'll still be drawing the same amount of pixels, but that's how you'd draw to a small buffer and resize it to match the canvas size.
If you're still having trouble, please post a MCVE in a new question post, and we'll go from there. Good luck.

SVG in DOM is not drawn on HTML5 Canvas

I am trying to draw an SVG which is appended in my DOM on a dynamically created HTML 5 canvas
But cant able to draw it. Find the sample in the below link
http://jsplayground.syncfusion.com/Sync_wnoo553d
But the SVG is not draw on the canvas. If draw any SVG/image from a URL, it is drawn fine. But not working only when drawn a DOM element dynamically.
My code snippet is
var img = new Image(); // draw svg on canvas
img.onload = function () {
exprtCtx.drawImage(img, 0, 0);
};
img.src = svg;
Where svg is the variable holding the SVG element in DOM.
Guide me to resolve this. Thanks in advance.

drawing on top of the image using paperjs

I'm using Paper.js to draw lines on canvas.
I want to be able to upload local image to the paperjs canvas and then be able to draw on top of it.
What I did is:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function make_base()
{
var img = document.createElement("img");
img.src = "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg";
context.drawImage(img, 100, 100);
}
document.getElementById('imageUpload').addEventListener('click', function(){
make_base();
});
This successfully adds an image to my canvas, but when I draw on canvas, image disappears and the image is on top of the lines, should be behind them.

You can add the image to the paper project as a paperjs Raster item, as such
var raster = new Raster({
source: "http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg",
position: view.center
});
It will be inserted into the project in the current layer. You can then use paperjs functions like sendToBack and bringToFront to manipulate what appears where. I would probably put the raster image on the first Layer then add a new Layer for the drawing to make it easy to keep track of.

If you don't need to change or working with the image, use background-image on canvas tag:
<canvas id="canvas"
style="background-image: url(http://paperjs.org/tutorials/images/working-with-rasters/mona.jpg);"></canvas>

Flash Canvas responsive animation size

Is it possible for an animation built with Flash Canvas to be responsive in the browser? By that I mean that I would like both the canvas and the animation itself to re-size themselves based on the size of the browser window while maintaining the original aspect ratio.
The code I get from publishing my canvas is the following and although I've been trying all day to figure this out, I can't get it right.
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test_1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
and
<canvas id="canvas" width="640" height="360" style="background-color:#FFFFFF"></canvas>
Can someone please help me? I don't have a lot of experience with java script or canvas and my attempts at updating the code haven't gotten me too far. With the help of another post here on stackoverflow I managed to have my canvas be responsive, but not the animation too. The animation just stayed in the same spot. Thank you very much in advance! Bellow is the code that made my canvas responsive if its any help:
<script>
var canvas, stage, exportRoot, myCanvas;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test_1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
var myCanvas = document.getElementById("canvas");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
window.addEventListener("resize", resizeCanvas, false);
function resizeCanvas (e) {
var myCanvas = document.getElementById("canvas");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
}
}
</script>

I found a solution that works on the Adobe Forums. It's not 100% perfect but it does the job:
https://forums.adobe.com/message/6405264
Basically just doing it through CSS and adding a width of 100% to your canvas scales both the canvas and the animation properly. So your canvas would look something like this:
<canvas id="canvas" width="720" height="660" style="background-color:#FFFFFF; width: 100%;"></canvas>
The issue with this solution is that while it scales both the canvas and the animation, it doesn't scale it as a vector so the quality may vary. In my situation, the animation is only about 10kb so I'm going to create it in about 3 different sizes, 300px apart to help with that.
A side note which may help some with more experience in javascript is that if you put all of your movieclips and animations into one parent one, when you publish it from flash you'll see something like this within the first few lines of code in your .js file:
this.my_anim_container.setTransform(360,329.2,2,2,0,0,0,0,8.6);
The 2 "2"s control the scale of your animation, so if you were to change them to 3 for example, your animation would now be enlarged. Figuring out a way to modify that based on your browser size would be even better, but I personally don't have the javascript knowledge for it.

Add image to canvas using paper JS

I used normal javascript to add image to canvas and this is the code
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas_image();
function canvas_image(){
can_img = new Image();
can_img.src = 'Chrysanthemum.jpg';
can_img.onload = function(){
context.drawImage(can_img, 100, 100);
}
}
How can i add image to canvas using paperJS library?

Quoting from the paperjs.org tutorial on rasters:
Images need to already be loaded when they are added to a Paper.js project. Working with local images or images hosted on other websites may throw security exceptions on certain browsers.
So you need an image somewhere that is preferably visually hidden:
<img id="mona" class="visuallyhidden" src="mona.jpg" width="320" height="491">
And the PaperScript code could look like this:
// Create a raster item using the image tag with id="mona"
var raster = new Raster('mona');
Then you can reposition, scale or rotate like so:
// Move the raster to the center of the view
raster.position = view.center;
// Scale the raster by 50%
raster.scale(0.5);
// Rotate the raster by 45 degrees:
raster.rotate(45);
And here is a paperjs.org sketch to play with.

First, If you want to work with JavaScript directly look at this tutorial.
Once you understand it, you would have something like this to load image in raster
paper.install(window);
window.onload = function() {
// Setup directly from canvas id:
paper.setup('myCanvas');
var raster = new paper.Raster({source: 'Chrysanthemum.jpg', position: view.center});
}