Template for canvas html5/jquery/javascript - javascript

I am a beginner at HTML5, Jquery/JavaScript.
I am attempting to create a canvas (sort of like windows paint application) and I am looking at other users sample functions/code to see whats it going on and attempt to re-create it.
$(function(){
var paint = new Paint($('#surface').get(0));
// Setup line template
var templateLine = new Paint($('#toolbar #line').get(0), {'readonly': true});
templateLine.shape = new Line([10, 10], [50, 50]);
templateLine.place(templateLine.shape);
I am unsure what is going on here. I know this new Paint is not an internal built-in function. What is it?
Secondly whats the difference between this and
$( document).ready(function(){
var canvas = $("#canvas").get(0);
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Choose a color
ctx.fillStyle = "black";
ctx.strokeStyle = color;
ctx.fillRect(0, 0, 50, 50);
} else {
// Browser doesn't support CANVAS
}
});
Help!!!

Well, first off, the code you're looking at in the beginning of your question was probably using some canvas library or API, but that is not the vanilla HTML5 Canvas API, making it completely different from what you've written below, even if they have the same output (although it doesn't look like they do).
Secondly, color is not defined, so unless that's defined in your code somewhere else, your code's not going to work. Otherwise, your code will draw a black rectangle in the corner of the canvas with the stroke color of whatever color is.

Related

Manipulating image within Indesign frame

I am currently trying to figure out how to change the color of a bitmapped image within indesign using basil.js. Ideally I would like to place the image and use some sort fo post styling to change the color.
var myImage = image('image_0009_10.psd', 0, 0, width, height);
property(myImage, "fillColor", "RISOBlue");
Right now I am using fillColor but that only changes the color of the frame that the bitmap live within. Anyone got any ideas as to how to edit the contents of a graphic frame? Specifically a bitmap?
fabianmoronzirfas is correct that you have to target the graphic of the image frame, I just want to suggest a slightly different syntax, which is a bit more basil-like to achieve the same thing:
// #include ~/Documents/basiljs/basil.js
function draw() {
var myImage = image('~/Desktop/someImage.psd', 0, 0);
var myGraphics = graphics(myImage);
property(myGraphics[0], 'fillColor', color(0, 0, 255));
}
Note the use of the graphics() function to get the actual graphics within an image rectangle.
Welcome to STO 👋 🎉 🎈
You are currently setting the fillColor for the Rectangle that contains the image. You will have to select the image explicitly since it is a child object of that Rectangle. See:
Rectangle
Images
Image
The code below is tested with InDesign 14.0.1 and the current Basil.js Develop version 2.0.0-beta
// #include "./basil.js"
function setup() {
var doc = app.activeDocument;
var imageFile = file(new File($.fileName).parent + "/img.bmp");
var img = image(imageFile, 0, 0, 100, 100);
img.images[0].fillColor = doc.swatches[4];
}
graphics() is perfect for this (as #mdomino mentioned) – but can also just grab that property of the image:
var myImage = image('image_0009_10.psd', 0, 0, width, height);
property(myImage.graphics[0], "fillColor", "RISOBlue");
Running inspect(myImage) will give a long laundry list of available properties.

How to draw other shapes or lines in `rot-js` canvas?

I'm using rot-js to draw a grid with hexagons and want to add triangles and other shapes to the canvas. I've tried acting on display.getContainer() but that's not working. What needs to be done to get this to work?
Setting ctx.globalCompositeOperation = "xor", I'm able to see the objects being drawn (but the colors are all wrong).
Setting ctx.globalAlpha = .8 also allows everything to be visible to an extent so I'm thinking this has something to do with layers.
If I work directly on an existing canvas element, drawing works fine.
Hard to tell for sure since you didn't provide anything about what you are actually doing, but given the description, I'll guess you are not waiting for the next frame before doing your own drawings over the ones made by the library.
The library stacks all its rendering operations in a requestAnimationFrame callback, so if you do it before, your drawings will be covered by the lib's ones.
To workaround this, simply wrap your own drawing operations in a requestAnimationFrame callback, it will get stacked after the ones of the lib, and will get drawn on top.
const display = new ROT.Display();
const canvas = display.getContainer();
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
// async calls
display.draw(5, 4, "#");
display.draw(15, 4, "%", "#0f0");
display.draw(25, 4, "#", "#f00", "#009");
// end async calls
// this will get covered
ctx.fillStyle = 'red';
ctx.fillRect(20,20,40,40);
// wait next frame
requestAnimationFrame(() => {
ctx.fillStyle = 'green';
ctx.fillRect(120,20,40,40);
})
<script src="https://cdn.jsdelivr.net/npm/rot-js"></script>

canvas toDataURL() returns transparent image

I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is completely transparent. If I do it as a jpeg, it is completely black.
I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.
var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');
while (run < passes) {
var rect = rectangles[run];
// Set the stroke and fill color
context.strokeStyle = 'rgba(0,255,130,0.7)';
context.fillStyle = 'rgba(0,0,255,0.1)';
context.rect(rect.left, rect.top, rect.width, rect.height);
context.setLineDash([2,1]);
context.lineWidth = 2;
run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());
And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.
Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.
Had the same problem, and found the solution here:
https://bugzilla.mozilla.org/show_bug.cgi?id=749824
"I can confirm, that it works if you set preserveDrawingBuffer.
var glContextAttributes = { preserveDrawingBuffer: true };
var gl = canvas.getContext("experimental-webgl", glContextAttributes);"
After getting the context with preserveDrawingBuffer, toDataURL just works as expected, no completely transparent or black image.
Having a similar problem I found a solution, thanks to the following post
https://github.com/iddan/react-native-canvas/issues/29.
These methods return a promise, so you would need to wait for it to resolve before the variable can be populated.
My solution was to set asyn function and await for the result:
const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }

How can i fill a shape created by a user at runtime using canvas

I am using sketch.js to enable a user to draw something on the canvas while the page is live.
I wanted to know if it would be possible to allow the user to draw a shape and then fill it with some color while the program is running
From what I read on the site, this script allows you only to free sketch something, not to draw specific shapes. If you'd like to draw a shape to the canvas you should use EaselJS
var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100);
var shape = new createjs.Shape(graphics);
Or you could use directly the canvas, without EaselJS
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,150,100);

Drawing graphics in ExtJs

First off I want to point out that I'm very new to the ExtJs library. I want to create an image through the use of some drawing/canvas API. The image I want to create is similar to the below image.
I'm wondering if this is possible through javascript/Extjs because I haven't been able to find anything online that makes this clear. If you can think of a different kind of approach I would appreciate that as well.
I don't know of a canvas API for Ext. But you can easily use the canvas API with Ext. I fiddled it.
Markup:
<canvas id="c1"></canvas>
JavaScript:
Ext.onReady(function() {
draw(document.getElementById('c1'));
});
function draw(el) {
var canvas = el;
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 50, 200);
for(var y = 10; y < 200; y += 10){
ctx.moveTo(0, y);
ctx.lineTo(25, y);
}
ctx.stroke();
ctx.closePath();
}
As far as I know ExtJS 3.x does not have any API that would facilitate canvas drawing. As Josiah says, you need to stick with plain JavaScript API for that, but you can still use ExtJS to manage your Elements and Components.

Categories