Do you understand why my Fabricjs canvas is rejecting a rectangle?

http://jsfiddle.net/a7ZSG/10/ check out the link to the jsfiddle for more information.

Having trouble getting a red rectangle to appear in a green canvas? Can anyone figure out why it's not showing up? I've attempted using window.onload around all the canvas-related code but no luck so far.

html:

<!doctype html>
<html lang="en" ;>

    <head>
        <meta charset="utf-8" />
        <title>CustomCase</title>
        <link rel="stylesheet" href="HeaderFooter.css">
        <link rel="stylesheet" href="SkapaDesign.css">
        <script src="Jquery.js"></script>
        <script src="Fabric.js"></script>
        <script src="Canvas.js"></script>
    </head>

    <body>
        <div id="Wrapper">

            <section id="Body">
                <img id="UpperShadow" src=NeråtSkugga.png>
                <div id="LeftColumn">
                    <div id="TextMode"></div>
                    <div id="CanvasContainer">
                        <canvas id="Canvas"></canvas>
                    </div>
                    <div id="LayerMode"></div>
                    <div id="IPhoneMode"></div>
                </div>
                <div id="RightColumn">
                    <div id="TextureMode"></div>
                    <div id="TextureFilter"></div>
                    <div id="TextureView">
                        <div id="TextureViewInside">
                            <div id="images">
                                <img src="FärgadePapper.png">
                                <img src="Hajar.png">
                                <img src="Labyrint.png">
                                <img src="Martini.png">
                                <img src="FärgadePapper.png">
                                <img src="Hajar.png">
                                <img src="Labyrint.png">
                                <img src="Martini.png">
                                <img src="FärgadePapper.png">
                                <img src="Hajar.png">
                                <img src="Labyrint.png">
                                <img src="Martini.png">
                                <img src="FärgadePapper.png">
                            </div>
                        </div>
                    </div>
                </div>
                <img id="LowerShadow" src=UppåtSkugga.png>
            </section>
        </div>
    </body>

</html>

css:

#Body {
    height: 675px;
}
/*--------------------------------Body--------------------------------*/
 #TextMode, #TextureMode, #CanvasContainer, #Canvas, #LayerMode, #TextureFilter, #TextureView, #IPhoneMode {
    float: left;
}
/*------------------------------Columns------------------------------*/
 #LeftColumn {
    float: left;
    width: 355px;
    margin: 20px 30px 0px 0px;
}
#RightColumn {
    float: left;
    width: 600px;
    margin-top: 20px;
}
/*----------------------------Left Column----------------------------*/
 #TextMode {
    width: 340px;
    height: 40px;
    margin-left: 15px;
    background: #848484;
}
#CanvasContainer {
    width: 270px;
    height: 519px;
    margin-left: 15px;
    background: black;
}
#Canvas {
    overflow: hidden;
    background: green;
    width: 270px;
    height: 519px;
}
#LayerMode {
    width: 70px;
    height: 519px;
    background: #848484;
}
#IPhoneMode {
    width: 340px;
    height: 40px;
    margin-left: 15px;
    background: #848484;
}
/*----------------------------Right Column---------------------------*/
 #TextureMode {
    width: 600px;
    height: 40px;
    background: #848484;
}
#TextureFilter {
    width: 130px;
    height: 559px;
    background: #848484;
}
#TextureView {
    width: 470px;
    height: 559px;
    overflow: auto;
}
#TextureViewInside {
    padding: 10px;
}
#images img {
    width: 97px;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
}

Javascript:

$(document).ready(function () {
    $("#images img").click(function () {
        var getsource = $(this).attr("src");
        alert(getsource);
    });
});

var canvas = new fabric.Canvas('Canvas');
var rect = new fabric.Rect({
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
});
canvas.add(rect);

Answer №1

Ensure to add jQuery to your fiddle for proper functionality.

Check out this updated fiddle that includes both fabric and jQuery (found under external resources):

http://jsfiddle.net/AbdiasSoftware/a7ZSG/11/

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

Is there a method available to condense or merge PHP, DHTML, and JavaScript components efficiently?

The title may be a bit confusing, so let me explain my idea here: Imagine we have a component for a web page, such as a database-driven table or grid. This hypothetical "component" functions independently, relying on several mixed language files: HTML for ...

Looking to efficiently output information generated within a headless browser in node.js

Is there a way to print out data created inside a Node.js running headless browser if console.log('Text') isn't working? For example: const pup = require('puppeteer'); const chrom = await pup.launch({headless:'new'}); ...

Sending array data from the client-side JavaScript to the Spring MVC controller via AJAX

Is there a way to send an array from JavaScript in a web browser to a Spring MVC controller using AJAX? Here's the JavaScript code I have: var a = []; a[0] = 1; a[1] = 2; a[2] = 3; // Is it possible to send multiple arrays as well? $.ajax({ typ ...

Is there a way to determine if the current path in React Router Dom v6 matches a specific pattern?

I have the following paths: export const ACCOUNT_PORTAL_PATHS = [ 'home/*', 'my-care/*', 'chats/*', 'profile/*', 'programs/*', 'completion/*', ] If the cur ...

Overriding a shared module service in Angular from a separate module: A step-by-step guide

I am working with various modules such as SchoolModule, UniversityModule, and SharedModule The SharedModule includes a BaseService that both the SchoolModule and UniversityModule providers are utilizing as an extension When loading the SchoolModule, I ne ...

Tips for changing the click event of a button with .on/off

My approach for attaching and detaching event handlers is through on()/off(). HTML: <div id='load' class="UnfiledContainer"> <button onclick="loaded()">Try it</button> <p id="demo"></p> </div> JS: ...

Learn the process of integrating VueJS with RequireJS

I am attempting to set up VueJS with RequireJS. Currently, I am using the following VueJS library: . Below is my configuration file for require: require.config({ baseUrl : "js", paths : { jquery : "libs/jquery-3.2.1.min", fullcalendar : "libs/ful ...

ReactJS: Oops! Looks like there's an issue with the element type - it's invalid. We were expecting a string

I am in the process of setting up a basic server-side rendered React application. Listed below are the steps I have taken: Step 1: Creating a new React app using create-react-app: npx create-react-app my-ssr-app Step 2: Installing necessary dependencies: ...

Is there a way to insert text onto an Isotope image?

I recently created a portfolio using Isotope and Jquery, but I am struggling to add descriptive text to my images without disrupting the layout of the portfolio. I have experimented with various options such as using position:relative for the images and p ...

It is not possible to utilize a JavaScript function once the script has been loaded through

I am attempting to programmatically load a local JavaScript file - PapaParse library, and then utilize one of its functions: $.getScript("./Content/Scripts/papaparse.js", function () { console.log("Papaparse loaded successfully"); Papa.parse(file, ...

There seems to be a problem as exits.success is not a recognized function -

Currently, I am exploring how to utilize Sails.js with the node-machine-syntax specifically in the context of listing flights. The code snippet below outlines my attempt at achieving this: /** * FlightsController * * @description :: Server-side actions fo ...

Trying to open the DB URL in a new tab when using PHP and MySQL will not work as expected

Before I begin, I want to express my gratitude to the community of StackOverFlow users for providing valuable answers. As a novice in PHP/mySql, I am learning through books and examples from others. Currently, my issue revolves around a MySQL database wit ...

The `terminateSession()` PHP function encapsulated within `$(window).unload`,

I'm currently developing a basic chat script that involves a killSession function. This function's purpose is to terminate the current session and remove the user from the database. However, I am encountering an issue where after setting and veri ...

Combining XML files with jQuery

Can multiple XML documents be merged into a single file (named newResult) using jQuery or pure JavaScript? I need to combine various hosted XML documents into one file, for reasons beyond my control. I have tried different techniques but haven't foun ...

Is there a way to deactivate the spin buttons for an input number field?

Is there a way to create an input element with type number in Vue using createElement() in TypeScript and then disable the spin buttons for increment and decrement? I attempted to use the following CSS: input[type=number]::-webkit-inner-spin-button, input ...

Creating JavaScript Powered Pie Charts

I am seeking a lightweight JavaScript pie chart option to replace PlotKit, as the library is too large for my low bandwidth. Ideally, I am looking for a compact and efficient solution in either JavaScript or jQuery. ...

javascript code to set focus on a label when any button is clicked in the DOM

On my aspx page, I have an asp:Textbox and an asp:label control. I'm looking to set focus on the label when a button is clicked using JavaScript. Any tips on how to achieve this? Appreciate your help... ...

Organize information before making a choice in the dropdown menu

Currently, I have a dropdown menu in HTML that allows you to order the data by different options: <select ng-model="sortOrder" ng-options="option.value as option.name for item in options"></select> In addition, I have implemented code using n ...

Use jQuery to move list items up or down when clicking on an element outside the list, as long as they contain checked checkboxes

I am in need of creating a user interface that includes both a "Move Up" button and a "Move Down" button. These buttons will allow users to reposition list items by moving them up or down within the list, based on whether they click the "Move Up" or "Move ...

Using both text and image sprites in a horizontal menu list on a UL element

I am attempting to create a horizontal menu using image sprites and text, but have been unsuccessful so far. Although I have an idea of what I want it to look like, my CSS is not achieving the desired result. This is what my current CSS looks like: < ...